.sop{--sop-accent:#252b28;--sop-border:#d8dcd9;--sop-muted:#646b66;clear:both;width:100%;max-width:100%;min-width:0;flex:0 0 100%;grid-column:1 / -1;margin:1.5rem 0;font-size:1rem;line-height:1.5;color:inherit;box-sizing:border-box}
.sop *{box-sizing:border-box}.sop [hidden]{display:none!important}
.sop .sop-group{display:block;float:none;clear:both;margin:0 0 1.6rem;padding:0;border:0;min-width:0}.sop-group legend{display:block;float:none;width:100%;font-size:1em;font-weight:650;margin:0 0 .85rem;padding:0}.sop-required{font-weight:400;font-size:.8em;color:var(--sop-muted)}.sop-heading-selection{font-size:.9em;font-weight:400;color:var(--sop-muted)}
.sop-description{font-size:.9em;margin:.4rem 0 .85rem;color:var(--sop-muted)}.sop-choices{width:100%;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.65rem;max-width:600px;align-items:start}
.sop .sop-choice{position:relative;float:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:48px;height:auto;width:auto;max-width:none;margin:0;padding:.65rem .5rem;border:1px solid var(--sop-border);border-radius:5px;cursor:pointer;background:#fff;color:#252b28;font-weight:400;text-align:center;line-height:1.35;transition:border-color .12s,box-shadow .12s}
.sop .sop-choice>input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;appearance:auto}.sop .sop-choice-label{display:block;float:none;overflow-wrap:anywhere;flex:none;font-size:.85em}.sop .sop-choice-price{font-size:.75em;white-space:nowrap;color:var(--sop-muted)}
.sop-choice:hover{border-color:var(--sop-accent)}.sop-choice.is-selected,.sop-choice:has(>input:checked){border-color:var(--sop-accent);box-shadow:inset 0 0 0 1px var(--sop-accent)}.sop-choice:focus-within{outline:2px solid var(--sop-accent);outline-offset:4px}
.sop [data-display=color] .sop-choices{grid-template-columns:repeat(auto-fill,76px);gap:14px 12px;max-width:none}.sop [data-display=image] .sop-choices{grid-template-columns:repeat(auto-fill,96px);gap:16px 14px;max-width:none}
.sop [data-display=color] .sop-choice,.sop [data-display=image] .sop-choice{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:0;border:0;border-radius:0;padding:0 3px;background:transparent;gap:8px;box-shadow:none}
.sop .sop-visual{position:relative;display:block;flex:none;box-sizing:border-box;border:1px solid #0002;border-radius:4px;overflow:visible}.sop .sop-color-tile{width:60px;height:60px}.sop .sop-image-tile{width:84px;height:84px;overflow:visible;background:#f0efec}
.sop .sop-image-tile img{display:block;width:100%;height:100%;min-width:0;max-width:100%;max-height:100%;margin:0;padding:0;object-fit:cover;border-radius:3px;box-shadow:none}.sop .sop-unset{background:repeating-linear-gradient(135deg,#f4f4f4 0px,#f4f4f4 6px,#e5e5e5 6px,#e5e5e5 7px)}.sop-image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.5rem;color:#747a76}
.sop [data-display=color] .sop-choice-label,.sop [data-display=image] .sop-choice-label{font-size:.75em;line-height:1.35;max-width:100%}.sop [data-display=color] .sop-choice-price,.sop [data-display=image] .sop-choice-price{margin-top:-4px;font-size:.7em}
.sop [data-display=color] .sop-choice:hover .sop-visual,.sop [data-display=image] .sop-choice:hover .sop-visual{outline:1px solid #777;outline-offset:3px}
.sop [data-display=color] .sop-choice.is-selected .sop-visual,.sop [data-display=image] .sop-choice.is-selected .sop-visual,.sop [data-display=color] .sop-choice:has(>input:checked) .sop-visual,.sop [data-display=image] .sop-choice:has(>input:checked) .sop-visual{outline:2px solid var(--sop-accent);outline-offset:3px}
.sop [data-display=color] .sop-choice:has(>input:checked) .sop-visual:after,.sop [data-display=image] .sop-choice:has(>input:checked) .sop-visual:after{content:'✓';position:absolute;top:-7px;right:-7px;display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--sop-accent);border:2px solid #fff;color:#fff;font:700 11px/1 sans-serif;z-index:2;pointer-events:none}
.sop [data-display=cards] .sop-choices{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}.sop [data-display=cards] .sop-choice{flex-direction:row;text-align:left;gap:.6rem}.sop [data-display=cards] .sop-choice>input{position:static;opacity:1;inset:auto;width:18px;height:18px;flex-shrink:0;accent-color:var(--sop-accent)}.sop [data-display=cards] .sop-choice img{width:40px;height:40px;object-fit:cover}.sop [data-display=cards] .sop-choice-label{flex:1}
.sop-group select,.sop-group>input[type=text],.sop-group>textarea,.sop-search-label input{width:100%;max-width:100%;padding:.75rem;border:1px solid var(--sop-border);border-radius:5px;font:inherit;background:#fff;color:#252b28}
.sop .sop-more-slot{display:flex;float:none;position:static;align-items:flex-start;justify-content:center;width:100%;margin:0;padding:0;min-width:0}.sop .sop-more,body.woocommerce form.cart .sop .sop-more{float:none!important;display:inline-flex!important;align-items:center;justify-content:center;gap:5px;position:static!important;margin:0!important;padding:8px 13px!important;min-height:38px;height:auto;width:auto;max-width:100%;border:1px solid #bfc6c0!important;border-radius:5px!important;box-shadow:none!important;background:transparent!important;color:var(--sop-accent)!important;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.3;text-decoration:none!important;letter-spacing:0;text-transform:none}.sop .sop-more:hover{border-color:var(--sop-accent)!important;background:#00000005!important}.sop-more-count{font-weight:400;color:var(--sop-muted)}.sop-error{color:#a51d24;font-size:.9em}.sop-group[aria-invalid=true]{border-left:3px solid #a51d24;padding-left:.75rem}.sop-addon-total{display:block;clear:both;padding:.85rem 1rem;background:#f3f5f3;border-radius:5px;font-size:.9em;font-weight:500;color:#303d34}
.sop-dialog{width:min(720px,calc(100vw - 2rem));max-height:85dvh;padding:1.5rem;border:0;border-radius:12px;box-shadow:0 16px 80px #0005;background:#fff;color:#252b28;overscroll-behavior:contain}.sop-dialog::backdrop{background:#14251d99}.sop-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.sop-dialog-header h2{font-size:1.2rem;line-height:1.3;margin:0}.sop .sop-close{float:none;background:transparent;border:0;box-shadow:none;color:inherit;font-size:1.7rem;min-width:44px;min-height:44px;cursor:pointer;line-height:1;padding:0}.sop-search-label{display:block;font-size:.85rem;margin:.7rem 0}.sop-search-label input{display:block;margin-top:.4rem;font-size:1rem}.sop-result-count{font-size:.8rem;color:var(--sop-muted);margin:.6rem 0 1.2rem}.sop-dialog-footer{position:sticky;bottom:-1.5rem;background:#fff;padding:1rem 0 .2rem;display:flex;justify-content:flex-end;margin-top:.75rem}.sop .sop-done{float:none;background:var(--sop-accent);color:#fff;border:0;border-radius:5px;padding:.7rem 1.5rem;font:inherit;cursor:pointer;min-height:44px}
.sop button:focus-visible,.sop select:focus-visible,.sop textarea:focus-visible{outline:2px solid var(--sop-accent);outline-offset:3px}.sop .sop-sr{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.sop-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.sop [data-display=cards] .sop-dialog-choices{grid-template-columns:1fr}.sop-dialog-footer{bottom:-1.5rem}}
@media(prefers-reduced-motion:reduce){.sop-choice{transition:none}}
.sop [data-display=color] .sop-choice:focus-within,.sop [data-display=image] .sop-choice:focus-within{outline:0}.sop [data-display=color] .sop-choice:has(>input:focus-visible) .sop-visual,.sop [data-display=image] .sop-choice:has(>input:focus-visible) .sop-visual{outline:2px solid var(--sop-accent);outline-offset:6px}
/* WooCommerce's grid-based add-to-cart block needs a shrinkable track for option grids. */
.woocommerce form.cart:has(>.sop){grid-template-columns:minmax(0,1fr) auto}

.sop .sop-group .sop-choices .sop-more-slot .sop-more{width:100%;min-height:48px;white-space:normal;flex-wrap:wrap;overflow-wrap:anywhere}.sop .sop-group[data-display=color] .sop-more-slot .sop-more{width:60px;height:60px;min-height:60px;padding:4px!important;gap:0 3px;font-size:.7rem}.sop .sop-group[data-display=image] .sop-more-slot .sop-more{width:84px;height:84px;min-height:84px;padding:6px!important;font-size:.75rem}
.sop .sop-group[data-display=color] .sop-more-slot{position:relative;min-height:84px}.sop .sop-group[data-display=image] .sop-more-slot{position:relative;min-height:108px}.sop .sop-group[data-display=color] .sop-more-count,.sop .sop-group[data-display=image] .sop-more-count{position:absolute;left:0;right:0;top:65px;font-size:.7rem;line-height:1.35;text-align:center}.sop .sop-group[data-display=image] .sop-more-count{top:89px}