/* Extends the incumbent Shop controls: choose a shirt and one to four named HTV colors before checkout. */
.shop-textile-fields { grid-column: 1 / -1; }
.shop-textile-fields > p, .shop-htv-help { line-height: 1.55; }
.shop-textile-base { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 16px 0 24px; }
.shop-cart-item .shop-textile-base label { display: grid; gap: 8px; }
.shop-textile-base label > span > strong { display: inline; margin-left: 5px; }
.shop-textile-base label strong { font-size: .8rem; }
.shop-textile-base input { min-height: 44px; width: 100%; min-width: 0; border: 1px solid #81756b; border-radius: 6px; padding: 10px 12px; background: #fffdf9; color: #28211c; font: inherit; }
.shop-textile-base input::placeholder { color: #6b5d51; opacity: 1; }
.shop-htv-palette { min-width: 0; border: 0; padding: 0; margin: 0 0 20px; }
.shop-htv-palette legend { font-weight: 700; margin-bottom: 6px; }
.shop-htv-palette [data-htv-count] { margin: 4px 0 12px; }
.shop-htv-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.shop-cart-item .shop-htv-choice { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 8px; border: 1px solid #a09284; border-radius: 6px; background: #fffdf9; color: #28211c; cursor: pointer; }
.shop-cart-item .shop-htv-choice input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #6f3d8b; }
.shop-htv-choice:has(input:checked) { border-color: #6f3d8b; background: #f0e6f4; }
.shop-htv-choice:has(input:disabled) { cursor: default; background: #f3f0ed; }
.shop-htv-choice small { display: block; font-size: .76rem; line-height: 1.35; color: #615248; }
.shop-htv-choice > span:last-child { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.35; }
.shop-htv-swatch { width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid #786e67; border-radius: 50%; background: var(--htv-color); }
.shop-htv-swatch--chrome { background: linear-gradient(135deg,#777e85,#f5f6f7 42%,#929ba4 58%,#e6e8ea); }
.shop-htv-help { margin-top: 12px; font-size: .85rem; }
.shop-textile-base input:focus-visible, .shop-htv-choice:has(input:focus-visible) { outline: 3px solid #6f3d8b; outline-offset: 2px; }
@media (max-width: 420px) { .shop-textile-base, .shop-htv-options { grid-template-columns: 1fr; } .shop-cart-item .shop-htv-choice { gap: 9px; padding: 8px; } }