.gregoir-swatch{display:inline-block;border-radius:50%;border:1px solid rgba(0,0,0,.15);vertical-align:middle;flex-shrink:0}
.gregoir-swatch--small,.gregoir-color-loop .gregoir-swatch{width:14px;height:14px}
.gregoir-swatch--medium{width:20px;height:20px}
.gregoir-swatch--large{width:44px;height:44px}
.gregoir-swatch--xlarge{width:44px;height:44px;border-radius:4px;background-size:cover;background-position:center}
.gregoir-color-loop{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:#666}
.gregoir-color-single{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px}
.gregoir-color-single .gregoir-color-heading{font-weight:600}
.gregoir-color-inline{display:inline-flex;align-items:center;gap:6px}
.gregoir-color-family{margin-top:8px;font-size:14px}
.gregoir-color-family .gregoir-color-heading{font-weight:600;display:block;margin-bottom:6px}
.gregoir-color-family__swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.gregoir-swatch--active{box-shadow:0 0 0 2px #fff,0 0 0 3px #333}
.gregoir-swatch--link{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none;display:inline-block}
.gregoir-swatch--link:hover{transform:scale(1.15);box-shadow:0 0 0 2px #fff,0 0 0 3px #999}
.gregoir-color-loop .gregoir-swatch--active{box-shadow:0 0 0 1px #fff,0 0 0 2px #333}
.gregoir-swatch[data-name]{position:relative}
.gregoir-swatch[data-name]:hover::after,.gregoir-swatch[data-name]:focus-visible::after{content:attr(data-name);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.02em;padding:4px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:9999;opacity:1}
.gregoir-swatch[data-name]:hover::before,.gregoir-swatch[data-name]:focus-visible::before{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#111;pointer-events:none;z-index:9999}
.gregoir-product-specs{margin:12px 0;font-size:14px;line-height:1.5}
.gregoir-product-specs--table{border-collapse:collapse;width:auto}
.gregoir-product-specs--table th{text-align:left;padding:4px 12px 4px 0;font-weight:600;color:#666;vertical-align:top;white-space:nowrap}
.gregoir-product-specs--table td{padding:4px 0;vertical-align:top}
.gregoir-product-specs--inline{display:inline-block}
.gregoir-product-specs--inline span{margin-right:8px}
.gregoir-product-specs--inline span+span::before{content:" \B7 ";color:#bbb;margin-right:8px}
.gregoir-product-specs--list{margin:0;padding-left:18px}
.gregoir-swatch-item{position:relative;display:inline-flex}
.gregoir-swatch-loupe{position:absolute;right:-7px;bottom:-7px;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;line-height:1;padding:0;color:#333;box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:3}
.gregoir-swatch-loupe:hover{background:#111;color:#fff}
.gregoir-sw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:100000}
.gregoir-sw-overlay.open{display:flex}
.gregoir-sw-modal{background:#fff;border-radius:8px;max-width:620px;width:92%;max-height:88vh;overflow:auto;padding:22px 24px;position:relative}
.gregoir-sw-title{margin:.1em 0 .8em;font-weight:600}
.gregoir-sw-close{position:absolute;top:8px;right:14px;border:none;background:none;font-size:26px;line-height:1;cursor:pointer;color:#999}
.gregoir-sw-samples{display:flex;gap:18px;flex-wrap:wrap}
.gregoir-sw-sample{flex:1 1 240px;min-width:200px;border:1px solid #eee;border-radius:6px;overflow:hidden}
.gregoir-sw-sample img{width:100%;height:auto;max-height:240px;object-fit:contain;display:block;background:#f3f3f3}
.gregoir-sw-meta{padding:10px 12px}
.gregoir-sw-nm{font-weight:600;font-size:15px}
.gregoir-sw-mt{color:#777;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.gregoir-sw-grade{color:#999;font-size:11px;margin-top:4px}
.gregoir-sw-badge{display:inline-block;margin-top:6px;font-size:10px;background:#f0e6cf;color:#7a5b1e;border-radius:8px;padding:1px 7px}
.gregoir-sw-fallback .gregoir-sw-circle{display:block;width:80px;height:80px;border-radius:50%;margin:24px auto}