@media screen and (max-width: 767px) {
    /* Робимо шрифт самого тексту "Кошик" невидимим (0 пікселів) */
    .sj-minicart-pro .mc-yourcart {
        font-size: 0 !important;
    }
    
    /* Повертаємо нормальний розмір шрифту для цифри та слова "товарів" */
    .sj-minicart-pro .mc-yourcart .mc-totalproduct,
    .sj-minicart-pro .mc-yourcart .mc-status {
        font-size: 14px !important; /* Вкажіть розмір, який вам підходить */
        display: inline-block !important;
    }
}

/* Вирівнюємо всі елементи форми в один рядок */
.vm-product-media-button .addtocart-bar {
    display: flex;
    align-items: center; /* Вирівнювання по вертикальному центру */
    gap: 10px;           /* Відступ між блоком кількості та кнопкою кошика */
    flex-wrap: wrap;     /* Щоб на мобільних екранах кнопка красиво переносилася, якщо не влазить */
}

/* Вирівнюємо елементи всередині блоку кількості (- 1 +) */
.vm-product-media-button .quantity-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc; /* Легка рамка навколо всього блоку (за бажанням) */
    border-radius: 4px;
    overflow: hidden;
}

/* Стилізуємо інпути (кнопки мінус, плюс та поле вводу) */
.vm-product-media-button .quantity-controls {
    background: #f4f4f4;
    border: none;
    width: 35px;
    height: 38px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background 0.2s;
}

.vm-product-media-button .quantity-controls:hover {
    background: #ddd;
}

.vm-product-media-button .quantity-input {
    width: 45px;
    height: 38px;
    text-align: center;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size: 16px;
}

/* Стиль для кнопки Купити (якщо Helix її автоматично не розфарбував) */
.vm-product-media-button .addtocart-button input {
    height: 38px;
    padding: 0 20px;
    cursor: pointer;
}

.my-large-title {
    display: block !important;    /* Додайте цей рядок: перетворює на блок */
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important; /* Тепер точно спрацює */
}



@media (max-width: 767px) {
    .mob-image-hide { display: none !important; } /* Приховати на телефоні */
}
@media (min-width: 768px) {
    .pc-image-hide { display: none !important; } /* Приховати на ПК */
}

/* Стилізація кнопки "Купити" */
.vm-product-media-button .isolated-submit-btn {
    background-color: #3E753B; /* Вкажіть ваш колір (наприклад, помаранчевий #ff9900) темний чорний сірий #333333 */
    color: #ffffff;           /* Колір тексту кнопки */
    border: none;             /* Прибираємо стандартну рамку */
    border-radius: 4px;       /* Заокруглення кутів (за потреби) */
    padding: 0 20px;          /* Внутрішні відступи */
    height: 38px;             /* Висота, щоб збігалася з інпутами */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Плавна зміна при наведенні */
    
   width: 175%;
    height: 40px;
}

/* Ефект при наведенні мишкою */
.vm-product-media-button .isolated-submit-btn:hover {
    background-color: #ff9900; /* Темніший відтінок для ефекту наведення */
}