/* ===============================
   RESET COMMERCEKIT
   =============================== */

.cgkit-attribute-swatch .swatch,
.cgkit-attribute-swatch .swatch::before,
.cgkit-attribute-swatch .swatch::after,
.cgkit-attribute-swatch .cross {
    background: #fff !important;
    background-image: none !important;
    display: none !important;
    content: none !important;
}

.cgkit-attribute-swatch .swatch {
    display: flex !important;
}

/* ===============================
   FUGU – SWATCH BUTTON
   =============================== */

.cgkit-attribute-swatch .swatch {
    width: 62px;
    height: 74px;
    padding: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #222;
    border-radius: 2px;
    background: #fff;

    cursor: pointer;
}

/* ===============================
   CONTENT
   =============================== */

.fugu-swatch-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fugu-swatch-inner img {
    max-height: 34px;
    object-fit: contain;
    margin-bottom: 4px;
    display: block;
}

.fugu-swatch-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #000;
}

/* ===============================
   HOVER – ZERO EFEKTÓW
   =============================== */

.cgkit-attribute-swatch .swatch:hover {
    border-color: #222;
}

/* ===============================
   SELECTED – JEDYNY FOCUS
   =============================== */

.cgkit-attribute-swatch .swatch.cgkit-swatch-selected {
    border-color: #1a73e8;
    box-shadow: inset 0 0 0 1px #1a73e8;
}

/* ===============================
   USUŃ PODGLĄD NAD SWATCHAMI
   =============================== */

.cgkit-chosen-attribute {
    display: none !important;
}

@media (max-width: 768px) {

    #fugu-mobile-preview {
        position: fixed;              /* 🔑 KLUCZ */
        top: 120px;
        right: 10px;

        width: 46vw;                  /* ~ pół ekranu */
        max-width: 180px;

        z-index: 20;
        background: #fff;

        padding: 4px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;

        display: none;                /* sterowane JS */
        pointer-events: none;         /* NIE blokuje tapów */
    }

    #fugu-mobile-preview img {
        display: block;
        width: 100%;
        max-height: 70px;
        object-fit: contain;
    }
}


#fugu-mobile-preview {
    z-index: 8; /* wyżej niż header */
}