/* Product page pieces from the Tropical Nerds plugin: variation buttons and the photo upload. Colors come from the
   theme's palette with neutral fallbacks. */

/* Variation buttons */
.tn-select-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.tn-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.tn-option { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
	padding: 0.5rem 1rem; border: 1px solid var(--wp--preset--color--accent-6, #ddd); border-radius: 999px;
	background: var(--wp--preset--color--base, #fff); font-size: 0.9375rem; line-height: 1.2; transition: border-color 0.15s; }
.tn-option:hover { border-color: var(--wp--preset--color--contrast, #222); }
.tn-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tn-option:has(input:checked) { border-color: var(--wp--preset--color--contrast, #222); box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast, #222); }
.tn-option:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--accent-1, #246); outline-offset: 2px; }
.tn-option.is-disabled { opacity: 0.5; border-style: dashed; } /* not with the current choices; clicking it resets them */
.tn-swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tn-swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); flex: none; }

/* Customer photos */
.tn-photos { flex: 1 1 100%; border: 1px solid var(--wp--preset--color--accent-6, #ddd); border-radius: 10px; padding: 1rem 1.1rem 0.9rem; margin: 0 0 1rem; background: var(--wp--preset--color--accent-5, #f7f3ec); }
.tn-photos legend { font-weight: 700; padding: 0 0.4rem; margin-left: -0.4rem; }
.tn-photos__help, .tn-photos__note { font-size: 0.875rem; color: var(--wp--preset--color--accent-4, #555); margin: 0 0 0.8rem; }
.tn-photos__note { margin: 0.6rem 0 0; }
.tn-photos__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.9rem; }
.tn-photos__slot label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; }
.tn-photos__slot label span { font-weight: 400; color: var(--wp--preset--color--accent-4, #555); }
.tn-photos__slot input[type=file] { width: 100%; font-size: 0.8125rem; }
.tn-photos__slot input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: 0.6rem; padding: 0.45rem 0.9rem; border-radius: 999px;
	border: 1px solid var(--wp--preset--color--contrast, #222); background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #222); cursor: pointer; }
.tn-photos__preview img { margin-top: 0.5rem; width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 6px; display: block; }
.tn-photos__error { color: var(--wp--preset--color--clay, #a33); font-size: 0.875rem; margin: 0.4rem 0 0; }
.tn-photos__error:empty { display: none; }