:root {
  --main-colored-color: #ffa202;
  --main-colored-hover-color: #ffd500;
  --main-color: #333;
  --text-color-button-hover:#000;

  --active-shadow: rgba(0, 0, 0, 0.2);
  --text-color: #ffffff;
  --border-color: #ffffff;
}


.jshop h1 {
	margin-top: 30px;
    margin-bottom: 30px;
	color: #333;
	font-size: clamp(24px, 2vw, 36px);
	font-weight: bold;
	text-transform: uppercase;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
        padding-top: 0px;
        padding-bottom: 10px;
    }
}

.productview .button_back {
    padding-top: 0px;
}

.row>* {
    flex-shrink: 0;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-top: var(--bs-gutter-y);
}

.custom-button {
  font-size: clamp(1vw, 2vw, 36px);         /* адаптивний розмір тексту */
  padding: 0.7em 2em;                         /* розмір кнопки */
  background-color: var(--main-colored-color);                 /* синій фон */
  color: var(--main-color);                              /* білий текст */
  text-decoration: none;                     /* прибрати підкреслення */
  border: 2px solid transparent;             /* початкова обводка */
  border-radius: 8px;                        /* скруглення */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* початкова тінь */
  transition: all 0.3s ease;                 /* плавні ефекти */
}

.custom-button:hover {
  background-color: var(--main-colored-hover-color);                 /* темніший фон */
  color: var(--text-color-button-hover); 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* сильніша тінь */
}

.custom-button:active {
  transform: translate(-50%, -50%) scale(0.97); /* ефект натискання */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);     /* слабша тінь */
}