/* Fabric options on the product page: loaded only for a fabric that is sold by option (see fabric-option-selector.blade.php).
   Mobile first: one column on a phone, two from 576px, three from 992px. Uses the shop's own colour variable when it exists. */
.fo-box { margin: 14px 0 4px; }
.fo-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 576px) { .fo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .fo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fo-card { position: relative; display: block; margin: 0; cursor: pointer; }
.fo-card input { position: absolute; opacity: 0; pointer-events: none; }
.fo-body {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "type price" "na na";
    align-items: center; gap: 2px 12px; padding: 12px 14px; min-height: 64px;
    border: 1.5px solid #dfe3ea; border-radius: 12px; background: #fff;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.fo-card:hover .fo-body { border-color: var(--primary, #1a1a2e); }
.fo-card input:focus-visible + .fo-body { outline: 2px solid var(--primary, #1a1a2e); outline-offset: 2px; }
.fo-card.is-selected .fo-body { border-color: var(--primary, #1a1a2e); box-shadow: 0 0 0 3px rgba(26, 26, 46, .08); background: #fbfbfd; }
.fo-name { grid-area: name; font-weight: 700; font-size: 15px; color: #1a1a2e; line-height: 1.25; }
.fo-type { grid-area: type; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #8a8fa0; }
.fo-price { grid-area: price; font-weight: 800; font-size: 17px; color: var(--primary, #1a1a2e); white-space: nowrap; }
.fo-na { grid-area: na; font-size: 12px; color: #c0392b; margin-top: 4px; }
.fo-card.is-off { cursor: not-allowed; }
.fo-card.is-off .fo-body { background: #f4f5f7; border-style: dashed; color: #9aa0ad; }
.fo-card.is-off .fo-name, .fo-card.is-off .fo-price { color: #9aa0ad; }

.fo-total { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #f6f8fb; font-size: 14px; color: #3a3f55; }
.fo-total strong { font-size: 18px; color: var(--primary, #1a1a2e); }
.fo-total small { display: block; margin-top: 2px; font-size: 12px; color: #8a8fa0; }
.fo-paused { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: #fff4f2; border: 1px solid #f3c9c2; color: #8a2f22; font-size: 14px; }