/* Shout Product Add-Ons — product page. Inherits the theme's fonts and colours; adds spacing only. */
.spa-addons { margin: 0 0 1.25em; display: grid; gap: 1em; width: 100%; }
.spa-field, .spa-heading { display: grid; gap: .35em; }
.spa-heading h3 { margin: .5em 0 0; font-size: 1.05em; }
.spa-label { font-weight: 600; display: block; }
.spa-label .required { color: #c0392b; text-decoration: none; border: 0; }
.spa-desc, .spa-desc p { margin: 0; font-size: .9em; opacity: .8; }
.spa-price { font-weight: 400; opacity: .75; font-size: .9em; }
.spa-addons input.spa-input,
.spa-addons select.spa-input,
.spa-addons textarea.spa-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.spa-addons textarea.spa-input { min-height: 6em; resize: vertical; }
.spa-choices { display: grid; gap: .35em; }
.spa-choice { display: flex; align-items: center; gap: .5em; cursor: pointer; margin: 0; font-weight: 400; }
.spa-choice input { margin: 0; flex: none; }
.spa-images { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6em; }
.spa-images .spa-choice { flex-direction: column; align-items: stretch; text-align: center; gap: .3em; padding: .4em; border: 2px solid transparent; border-radius: 8px; }
.spa-images .spa-choice input { position: absolute; opacity: 0; pointer-events: none; }
.spa-images .spa-choice:has(input:checked) { border-color: currentColor; }
.spa-images .spa-choice:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.spa-swatch { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.spa-counter, .spa-hint { font-size: .8em; opacity: .7; }
.spa-counter.spa-over { color: #c0392b; opacity: 1; }
.spa-totals { border-top: 1px solid rgba(0,0,0,.12); padding-top: .6em; display: grid; gap: .2em; }
.spa-totals-row { display: flex; justify-content: space-between; }
.spa-grand { font-size: 1.1em; }