/* Variation picker (tiles with photo, name and price; buttons for sizes) */
.cg-vt table.variations { border: 0; margin: 0 0 6px; width: 100%; }
.cg-vt table.variations tr { display: block; margin: 0; }
.cg-vt table.variations th { display: none; }
.cg-vt table.variations td { display: block; padding: 0; border: 0; }
.cg-vt table.variations td.value select, .cg-vt table.variations td.value .ct-select-input, .cg-vt table.variations td.value .select2 { display: none !important; }
.cg-vt .reset_variations { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--cg-brass); }
.cg-vt__head { margin: 16px 0 10px; font-size: 15px; color: #444; }
.cg-vt__head strong { color: #111; font-weight: 700; }
.cg-vt__opts { display: flex; flex-wrap: wrap; gap: 10px; }

.cg-vt__tile { width: 104px; padding: 0; border: 1px solid #cdd3d1; border-radius: 12px; background: #fff; overflow: hidden; display: flex; flex-direction: column; text-align: start; cursor: pointer; font: inherit; color: #111; transition: box-shadow .15s, border-color .15s; }
.cg-vt__tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f4f4f4; }
.cg-vt__tile .t { display: block; padding: 7px 9px 9px; border-top: 1px solid #e6e9e8; font-size: 12px; line-height: 1.35; color: #333; }
.cg-vt__tile .t b { display: block; font-weight: 700; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-vt__tile.is-on { border: 2px solid var(--cg-ink); box-shadow: 0 0 0 3px rgba(154,123,63,.3); }
.cg-vt__tile.is-on .t { padding: 6px 8px 8px; }

.cg-vt__pill { min-width: 54px; height: 44px; padding: 0 16px; border: 1px solid #b9c0be; border-radius: 10px; background: #fff; font: 500 15px "Roboto", system-ui, sans-serif; color: #111; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cg-vt__pill.is-on { border: 2px solid var(--cg-ink); background: var(--cg-sand); font-weight: 700; box-shadow: 0 0 0 3px rgba(154,123,63,.3); }

.cg-vt__pill.is-na, .cg-vt__tile.is-na { color: #9aa2a0; border-color: #d9dedc; cursor: not-allowed; }
.cg-vt__pill.is-na { background: linear-gradient(to top right, transparent calc(50% - 1px), #a9b0ae, transparent calc(50% + 1px)), #f6f7f7; }
.cg-vt__tile.is-na img { opacity: .4; }
.cg-vt__tile.is-na::after { content: ""; position: absolute; }
.cg-vt__tile.is-na { position: relative; background: linear-gradient(to top right, transparent calc(50% - 1px), #a9b0ae, transparent calc(50% + 1px)), #f6f7f7; }

@media (max-width: 480px) { .cg-vt__tile { width: calc((100% - 20px) / 3); min-width: 92px; } }

/* ===== Polish: four tiles across, crisp selected and unavailable states, no leftover old buttons ===== */
.cg-vt .cg-opts, .cg-vt .cg-opts__native { display: none !important; }
.cg-vt__opts { gap: 10px; }
.cg-vt__tile { flex: 0 0 calc((100% - 30px) / 4); width: calc((100% - 30px) / 4); min-width: 0; border: 1px solid #d3d8d6; border-radius: 10px; }
.cg-vt__tile .t { padding: 6px 7px 8px; font-size: 11.5px; }
.cg-vt__tile .t b { font-size: 12px; }
.cg-vt__tile.is-on { border-color: var(--cg-ink); box-shadow: inset 0 0 0 1px var(--cg-ink); background: #f1f5f3; }
.cg-vt__tile.is-on .t { padding: 6px 7px 8px; border-top-color: #cfd8d4; }
.cg-vt__pill { border: 1px solid #c7cdcb; background: #fff; border-radius: 8px; }
.cg-vt__pill.is-on { border-color: var(--cg-ink); box-shadow: inset 0 0 0 1px var(--cg-ink); background: #f1f5f3; font-weight: 700; }
.cg-vt__pill.is-na { color: #a3aaa8; border-color: #dde1df; background: linear-gradient(to top right, transparent calc(50% - .5px), #b9bfbd, transparent calc(50% + .5px)), #fff; }
.cg-vt__tile.is-na { color: #a3aaa8; border-color: #dde1df; background: linear-gradient(to top right, transparent calc(50% - .5px), #b9bfbd, transparent calc(50% + .5px)), #fff; }
.cg-vt__tile.is-na img { opacity: .45; }
@media (max-width: 480px) { .cg-vt__tile { flex-basis: calc((100% - 30px) / 4); width: calc((100% - 30px) / 4); min-width: 0; } .cg-vt__tile .t { font-size: 11px; } .cg-vt__tile .t b { font-size: 11.5px; } }

/* Buttons without photos: colour dot, and the price when the options are priced differently */
.cg-vt__pill { display: inline-flex; align-items: center; gap: 9px; }
.cg-vt__dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.22); flex: none; box-shadow: inset 0 0 0 1.5px #fff; }
.cg-vt__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: start; }
.cg-vt__txt b { font-weight: inherit; }
.cg-vt__pill--price { height: auto; min-height: 50px; padding: 8px 16px; }
.cg-vt__pill--price small { font-size: 12px; font-weight: 400; color: #555; }
.cg-vt__pill.is-na .cg-vt__dot { opacity: .45; }

/* Show the whole photo on the tile (no awkward crop of portrait or wide artwork) */
.cg-vt__tile img { object-fit: contain; background: #f4f5f4; }

/* Prompt shown when Add to cart is pressed before every option is chosen */
.cg-vt__need { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--cg-sale, #b3261e); }
.cg-vt__group.is-needed .cg-vt__opts { animation: cg-need 1s ease 2; border-radius: 12px; }
@keyframes cg-need { 0%, 100% { box-shadow: 0 0 0 0 rgba(179,38,30,0); } 50% { box-shadow: 0 0 0 4px rgba(179,38,30,.35); } }