/* The storefront's shortcut has no configuration payload; use the real form. */
body:has(#jrf-hat-config) div.product .summary{float:none!important;width:100%!important;max-width:1100px;margin:0 auto!important;clear:both}
body:has(#jrf-hat-config) div.product .woocommerce-product-gallery{display:none!important}
body:has(#jrf-hat-config) .woocommerce-tabs{max-width:1100px;margin:1.5rem auto;clear:both}
body:has(#jrf-hat-config) .storefront-sticky-add-to-cart,body:has(#jrf-hat-config) .ppc-button-wrapper{display:none!important}
#jrf-hat-config,.hat-portal{max-width:1100px;margin:1.5rem auto;color:#202020}
#jrf-hat-config{width:100%;clear:both}.hat-portal{padding:1rem}
.hat-design,.hat-review{border:1px solid #cfc9be;border-radius:8px;padding:1.25rem;margin:1rem 0;background:#fff}
.hat-controls,.hat-admin-fields{display:flex;gap:1rem;flex-wrap:wrap;align-items:end}
.hat-controls label,.hat-admin-fields label{display:flex;flex-direction:column;gap:.35rem;flex:1 1 145px}
.hat-controls input,.hat-controls select,.hat-controls textarea{max-width:100%;width:100%;box-sizing:border-box}
.hat-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1rem 0}
.hat-choice{padding:.75rem;border:1px solid #ded9d0;border-radius:5px;display:flex;flex-direction:column;gap:.4rem}
.hat-unit-price{display:block;text-align:center;padding:.4rem;background:#f3f0e8;border-radius:4px;font-size:1rem}
.hat-choice img{width:100%;height:120px;object-fit:contain}.hat-choice input{width:100%;min-width:0}.hat-choice small{font-size:.8rem}
.hat-image-stage{position:relative;width:100%;overflow:hidden;background:white}.hat-choice .hat-base-photo{display:block;width:100%;height:auto}.hat-choice .hat-art-preview{position:absolute;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;object-fit:contain}.hat-art-preview[hidden]{display:none}
.hat-image-stage[data-choice="8804h-black"] .hat-base-photo{transform:scale(1.13);transform-origin:50% 43%}.hat-image-stage[data-choice="8869-white"] .hat-base-photo{transform:scale(.95);transform-origin:50% 43%}
.hat-choice .hat-art-preview{object-fit:fill}.hat-controls .hat-ratio-lock{flex-direction:row;align-items:center}.hat-controls .hat-ratio-lock input{width:auto}
.hat-thread-choices{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}.hat-thread-choices h4,.hat-thread-choices>.hat-help{flex-basis:100%;margin:.2rem 0}.hat-thread-choices label{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.hat-thread-choices select{max-width:180px}.hat-thread-swatch{width:20px;height:20px;border:1px solid #888;border-radius:50%;display:inline-block}
@media(max-width:767px){.hat-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hat-mask{max-width:300px;max-height:180px;border:1px solid #aaa;margin:.75rem 0}.hat-mask-confirm{display:block}.hat-mask-confirm input{margin-right:.5rem}
.hat-status{padding:.75rem 0;white-space:pre-wrap}.hat-error{color:#a00}
.hat-summary{background:#f3f0e8;border-radius:5px;padding:1rem;position:relative;margin:1rem 0}.hat-summary strong{font-size:1.4rem}
.hat-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}.hat-actions button{white-space:normal}
.hat-table-scroll{overflow-x:auto}.hat-proof img{max-width:100%;max-height:500px;object-fit:contain}.hat-progress{width:100%;height:14px}.hat-help{font-size:.9rem;color:#555}
.hat-pricing-grid{margin:2rem 0;padding-top:1rem;border-top:1px solid #cfc9be}.hat-pricing-grid table{width:100%;font-size:.9rem;border-collapse:collapse}.hat-pricing-grid th,.hat-pricing-grid td{padding:.6rem;border-bottom:1px solid #ded9d0;text-align:left}.hat-pricing-grid td{white-space:nowrap}.hat-pricing-grid thead{background:#f3f0e8}
.hat-review dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem}.hat-review dt{font-weight:bold}.hat-review dd{margin:0}
.hat-portal button,#jrf-hat-config button{cursor:pointer}.hat-review input,.hat-review textarea{max-width:100%}
.hat-review>label{display:block;margin:1rem 0}.hat-review>label>input:not([type=checkbox]),.hat-review>label>textarea{display:block;width:100%}.hat-review>button{margin:.35rem .35rem .35rem 0}.hat-review>a.button{display:block;width:fit-content;margin:1rem 0}
@media(max-width:480px){.hat-design,.hat-review{padding:.8rem}.hat-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hat-controls label{flex-basis:100%}.hat-review dl{display:block}.hat-review dd{margin-bottom:.6rem}}

/* Compact storefront preparation; staff production controls retain their layout. */
#jrf-hat-config{margin:0 auto}
.hat-design{padding:1rem;margin:.5rem 0 1rem}
.hat-design>.hat-controls{gap:.75rem;align-items:start}
.hat-design>.hat-controls>label{flex:0 1 210px}
.hat-upload{flex:1 1 320px;gap:.4rem;align-items:center}
.hat-upload label{flex:1 1 240px}.hat-upload button{padding:.6rem .8rem}
.hat-upload-note{flex-basis:100%;font-size:.85rem;margin:.15rem 0}
.hat-preparation{display:flex;gap:1rem;align-items:start;margin:.75rem 0}
.hat-preparation-settings{flex:1;min-width:0}
.hat-dimensions{gap:.65rem;align-items:end}.hat-dimensions label{flex:0 0 auto!important}
.hat-dimensions input[type=number]{width:90px;min-height:42px;padding:.45rem}
.hat-dimensions .hat-ratio-lock{min-height:42px;font-size:.9rem}
.hat-thread-choices{gap:.4rem .75rem;margin:.6rem 0}.hat-thread-choices[hidden]{display:none}
.hat-thread-choices h4{font-size:1rem}.hat-thread-choices label{gap:.3rem;font-size:.85rem}
.hat-thread-choices select{width:130px;min-height:40px;padding:.35rem}.hat-thread-choices>.hat-help{font-size:.8rem}
.hat-background{font-size:.85rem;margin:.5rem 0}.hat-background summary{cursor:pointer}.hat-background select{width:100%;max-width:320px;margin-top:.5rem;min-height:40px}
.hat-mask-area{flex:0 1 200px;font-size:.8rem}.hat-mask-area .hat-mask{max-width:150px;max-height:80px;margin:0 0 .3rem}.hat-mask-area p{margin:.2rem 0;font-size:.8rem}
.hat-notes label{display:block;font-size:.9rem}.hat-notes textarea{display:block;width:100%;min-height:55px;height:55px;padding:.5rem;box-sizing:border-box}
.hat-status:empty{display:none}.hat-status{padding:.3rem 0}
.hat-library-dialog{width:min(900px,calc(100vw - 24px));max-height:85vh;box-sizing:border-box;padding:1rem;border:1px solid #aaa;border-radius:8px;color:#202020;background:#fff;z-index:999999}
.hat-library-dialog::backdrop{background:rgba(0,0,0,.5)}.hat-library-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.hat-library-header h2{font-size:1.4rem;margin:0}
.hat-library-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0;align-items:center}.hat-library-nav input{min-width:0;flex:1 1 240px}.hat-library-dialog button{min-height:42px;padding:.5rem .75rem;white-space:normal}
.hat-library-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.hat-library-file{padding:.65rem;border:1px solid #ddd;border-radius:4px;display:flex;flex-direction:column;gap:.4rem;overflow-wrap:anywhere}.hat-library-file p{margin:0;font-size:.85rem}.hat-library-file strong{font-size:.9rem}.hat-library-thumb{height:100px;display:flex;align-items:center;justify-content:center;background:#f5f3ee}.hat-library-thumb img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:600px){.hat-preparation{flex-wrap:wrap}.hat-preparation-settings{flex-basis:100%}.hat-mask-area{display:flex;flex-wrap:wrap;gap:.3rem;flex-basis:100%;align-items:center}.hat-mask-area .hat-mask{max-width:90px;max-height:55px}.hat-mask-area p{flex:1 1 130px}.hat-library-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hat-design>.hat-controls>label{flex-basis:100%}.hat-upload{flex-basis:100%}}
@media(max-width:480px){.hat-dimensions{gap:.35rem}.hat-dimensions label{font-size:.8rem}.hat-dimensions .hat-ratio-lock{flex:1 1 70px!important;max-width:90px;font-size:.75rem}}

.hat-design-sidebar,.hat-design-selection{min-width:0}
@media(min-width:1024px){
 .hat-design{display:grid;grid-template-columns:240px minmax(0,1fr);gap:1rem;align-items:start}
 .hat-design-sidebar{padding-right:1rem;border-right:1px solid #e5e0d7}
 .hat-design-sidebar>.hat-controls{display:flex;flex-direction:column;align-items:stretch;gap:.7rem}
 .hat-design-sidebar>.hat-controls>label,.hat-design-sidebar .hat-upload{flex:0 0 auto}
 .hat-design-sidebar .hat-upload{display:flex;flex-direction:column;align-items:stretch}
 .hat-design-sidebar .hat-upload label{flex:0 0 auto;min-width:0}
 .hat-design-sidebar .hat-upload input[type=file]{font-size:.8rem}
 .hat-design-sidebar .hat-preparation{display:block;margin:.8rem 0 0}
 .hat-design-sidebar .hat-dimensions{gap:.5rem}
 .hat-design-sidebar .hat-dimensions .hat-ratio-lock{flex-basis:100%!important}
 .hat-design-sidebar .hat-thread-choices{gap:.4rem}
 .hat-design-sidebar .hat-thread-choices label{flex-wrap:nowrap}
 .hat-design-sidebar .hat-mask-area{margin-top:.8rem}
 .hat-design-selection>.hat-choice-grid{margin-top:0}
 .hat-design>.hat-status{grid-column:1/-1}
}

/* Keep the first hat panel directly below breadcrumbs on this product only. */
body:has(#jrf-hat-config) .storefront-breadcrumb{padding-bottom:0;margin-bottom:16px}
body:has(#jrf-hat-config) .content-area,body:has(#jrf-hat-config) .site-main,body:has(#jrf-hat-config) div.product,body:has(#jrf-hat-config) form.cart{padding-top:0;margin-top:0}
#jrf-hat-config>.hat-design:first-child{margin-top:0}

/* Sidebar intrinsic widths must never push controls into the hat grid. */
#jrf-hat-config .hat-design-sidebar,#jrf-hat-config .hat-design-sidebar *{box-sizing:border-box;min-width:0}
#jrf-hat-config .hat-design-sidebar .hat-controls,#jrf-hat-config .hat-design-sidebar label,#jrf-hat-config .hat-design-sidebar input,#jrf-hat-config .hat-design-sidebar select,#jrf-hat-config .hat-design-sidebar button{max-width:100%}
#jrf-hat-config .hat-design-sidebar input[type=file]{width:100%}
#jrf-hat-config .hat-design-sidebar .hat-upload-note{overflow-wrap:anywhere}
#jrf-hat-config .hat-design-sidebar button{white-space:normal;overflow-wrap:anywhere}
#jrf-hat-config .hat-thread-swatch{flex-shrink:0}

/* Guided setup, bounded help and standalone processed artwork. */
#jrf-hat-config .hat-step{font-size:.95rem;font-weight:700;line-height:1.4;margin:.5rem 0;display:flex;align-items:center;gap:.3rem;flex-basis:100%}
#jrf-hat-config>.hat-actions{align-items:center}
#jrf-hat-config .hat-tier-hint{margin:0;max-width:24rem}
#jrf-hat-config .hat-info{display:inline-flex;vertical-align:middle}
#jrf-hat-config .hat-info-button{padding:0;width:32px;height:32px;min-width:32px;border:0;background:transparent;color:#31566a;font-size:1.1rem;line-height:1;cursor:pointer}
.hat-info-popover{position:fixed;inset:auto;margin:0;width:280px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;padding:.8rem;border:1px solid #aaa;border-radius:6px;background:#fff;color:#222;box-shadow:0 3px 15px #0003;font-size:.85rem;box-sizing:border-box}
#jrf-hat-config .hat-flat-preview{margin:.6rem 0;width:100%;height:180px;background:repeating-conic-gradient(#ddd 0% 25%,#f6f6f6 0% 50%) 0 / 16px 16px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center}
#jrf-hat-config .hat-flat-preview[hidden]{display:none}
#jrf-hat-config .hat-processed-art{display:block;width:100%;height:100%;max-height:220px;object-fit:contain}
#jrf-hat-config .hat-stitch-result{font-size:.8rem;line-height:1.5}
#jrf-hat-config .hat-thread-row{width:100%;min-width:0}.hat-combined{font-size:.8rem;margin:.3rem 0}.hat-combined summary{cursor:pointer}.hat-source-swatches{display:flex;flex-wrap:wrap;gap:.4rem;padding:.4rem 0}.hat-source-swatches>span{display:flex;align-items:center;gap:.25rem}.hat-shade-editor{display:flex;flex-direction:column;gap:.4rem}.hat-combined button{font-size:.8rem;padding:.4rem}.hat-shade-editor select{width:100%;max-width:100%}
@media(min-width:1024px){#jrf-hat-config .hat-flat-preview{height:220px}.hat-design-selection>.hat-step{margin-top:0!important}}
@media(max-width:1023px){#jrf-hat-config .hat-flat-preview{width:180px;height:180px;margin:.6rem auto}}

#jrf-hat-config .hat-ratio-row{display:flex;align-items:center;gap:.3rem;flex-basis:100%}
#jrf-hat-config .hat-ratio-row .hat-ratio-lock{flex:0 1 auto!important;max-width:none}
#jrf-hat-config .hat-stitch-result{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem}

#jrf-hat-config .hat-upload-heading{display:flex;align-items:center;gap:.3rem;font-size:.9rem}
.hat-upload-working{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.85rem;max-width:100%;overflow-wrap:anywhere}.hat-upload-working progress{flex-basis:100%}.hat-spinner,.hat-is-working:before{content:"";display:inline-block;width:14px;height:14px;flex-shrink:0;border:2px solid #ccc;border-top-color:#31566a;border-radius:50%;animation:hat-working 1s linear infinite}.hat-is-working:before{margin-right:.4rem}@keyframes hat-working{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.hat-spinner,.hat-is-working:before{animation:none}}

#jrf-hat-config .hat-source-swatches{display:flex;flex-direction:column;gap:.4rem}#jrf-hat-config .hat-source-swatches label{display:flex;align-items:center;flex-wrap:nowrap;gap:.3rem;font-size:.8rem;width:100%}#jrf-hat-config .hat-source-swatches select{flex:1;min-width:0;width:auto}

#jrf-hat-config .hat-artwork-setup{width:100%;min-width:0}#jrf-hat-config .hat-artwork-setup>summary{font-size:.9rem;cursor:pointer;overflow-wrap:anywhere;margin:.5rem 0}#jrf-hat-config .hat-artwork-setup .hat-upload{display:flex;flex-direction:column;align-items:stretch}#jrf-hat-config .hat-artwork-setup .hat-upload label{flex:0 0 auto}#jrf-hat-config .hat-stitch-price{display:block;font-size:.95rem;width:100%}#jrf-hat-config .hat-fit-controls{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;margin:.6rem 0}#jrf-hat-config .hat-fit-controls:empty{display:none}#jrf-hat-config .hat-fit-controls label{display:flex;flex-direction:column;gap:.3rem}#jrf-hat-config .hat-fit-controls button{font-size:.8rem;padding:.5rem}#jrf-hat-config .hat-fit-controls p{margin:0}

.hat-color-dialog{width:min(760px,calc(100vw - 24px));max-height:90vh;overflow:auto;padding:1rem;border:1px solid #aaa;border-radius:8px;box-sizing:border-box}.hat-color-dialog::backdrop{background:#0008}.hat-color-dialog canvas{display:block;width:100%;height:auto;max-width:700px;cursor:crosshair;background:repeating-conic-gradient(#ddd 0% 25%,#f6f6f6 0% 50%) 0 / 16px 16px}.hat-color-dialog select,.hat-color-dialog button{max-width:100%;min-height:42px;margin:.3rem;padding:.5rem}.hat-color-dialog [hidden]{display:none}.hat-color-dialog .hat-thread-swatch{vertical-align:middle}

/* Consistent numbered steps; keep tier copy inline so it wraps naturally. */
#jrf-hat-config .hat-step,#jrf-hat-config .hat-name-heading,#jrf-hat-config .hat-artwork-setup>summary{font-family:inherit;font-size:.95rem;font-weight:700;line-height:1.4;color:#202020}
#jrf-hat-config .hat-step-text{min-width:0}
#jrf-hat-config .hat-tier-progress{color:#18733b}

#jrf-hat-config fieldset.hat-choice-grid{padding:0;border:0;min-width:0;background:transparent}
#jrf-hat-config .hat-choice-grid:disabled{opacity:.5}
#jrf-hat-config .hat-choice-grid:disabled .hat-choice{cursor:not-allowed}
#jrf-hat-config .hat-grid-unlock{color:var(--jrf-burgundy,#650d10);font-weight:600}
#jrf-hat-config .hat-grid-unlock[hidden]{display:none}