/* Shopgez Varyant Görseli Pro v1.1.6 */

.sgvi-image-host{position:relative}
.sgvi-listing-swatches{display:flex;align-items:center;justify-content:center;gap:4px;z-index:12;max-width:100%;box-sizing:border-box;direction:inherit;-webkit-overflow-scrolling:touch}
/* Compact floating capsule: it occupies only the width the variants need, never a full white band. */
.sgvi-position-overlay{position:absolute;left:50%;right:auto;bottom:7px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 14px);padding:4px 10px;border:1px solid rgba(203,213,225,.58);border-radius:999px;background:rgba(255,255,255,.84);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 3px 12px rgba(15,23,42,.10);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.sgvi-position-overlay.sgvi-has-overflow{justify-content:flex-start}
.sgvi-position-overlay::-webkit-scrollbar{display:none}
.sgvi-position-below{position:relative;justify-content:center;margin:7px 0 3px;flex-wrap:wrap;overflow:visible}
.sgvi-swatch{appearance:none;-webkit-appearance:none;border:1px solid #d7dde5;background:rgba(255,255,255,.97);padding:2px;margin:0;border-radius:7px;min-width:34px;height:34px;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;overflow:hidden;line-height:1}
.sgvi-swatch:hover{border-color:#7892b0}
.sgvi-swatch.is-static{cursor:default}
.sgvi-swatch:focus{outline:0}
.sgvi-swatch:focus-visible{border-color:#1f5f99;box-shadow:0 0 0 3px rgba(31,95,153,.18)}
.sgvi-swatch.is-active{border-color:#1f5f99;box-shadow:0 0 0 2px rgba(31,95,153,.18)}
.sgvi-swatch img{display:block;width:28px!important;height:28px!important;object-fit:cover;border-radius:5px;margin:0!important;max-width:none!important}
.sgvi-swatch span{display:none;font-size:11px;line-height:1.2;white-space:nowrap;max-width:88px;overflow:hidden;text-overflow:ellipsis}
.sgvi-show-names-desktop .sgvi-swatch span{display:inline-block}
.sgvi-more{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:28px;font-size:11px;font-weight:700;color:#334155;background:rgba(241,245,249,.96);border-radius:999px;padding:4px 7px;line-height:1}

@media (hover:hover){.sgvi-swatch:not(.is-static):hover{box-shadow:0 0 0 2px rgba(72,112,156,.12);transform:translateY(-1px)}}
@media(max-width:767px){
  .sgvi-position-overlay{bottom:5px;max-width:calc(100% - 10px);padding:3px 9px;gap:3px;border-radius:999px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(255,255,255,.82);box-shadow:0 2px 8px rgba(15,23,42,.08)}
  .sgvi-position-below{gap:4px;margin-top:6px}
  /* 44px remains the touch target; only the surrounding capsule was made smaller. */
  .sgvi-swatch{min-width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.90)}
  .sgvi-swatch img{width:36px!important;height:36px!important}
  .sgvi-show-names-desktop .sgvi-swatch span{display:none}
  .sgvi-show-names-mobile .sgvi-swatch span{display:inline-block;max-width:64px}
  .sgvi-more{min-height:30px;padding:5px 7px}
}

@media(max-width:480px){
  /* Two-column mobile grids are very narrow; keep the overlay visually light without changing desktop. */
  .sgvi-swatch{min-width:40px;height:40px}
  .sgvi-swatch img{width:32px!important;height:32px!important}
}
@media(max-width:380px){
  .sgvi-position-overlay{max-width:calc(100% - 8px);padding:3px 8px;gap:3px}
  .sgvi-swatch{min-width:44px;height:44px}
  .sgvi-swatch img{width:36px!important;height:36px!important}
}
@media(prefers-reduced-motion:reduce){.sgvi-swatch{transition:none}}
@media(forced-colors:active){.sgvi-swatch,.sgvi-more{forced-color-adjust:auto;border:1px solid ButtonText}.sgvi-swatch.is-active{outline:2px solid Highlight}}