@import "colors.css";

.products p {
   margin-top: 0;
}

.products .button {
   display: flex;
   justify-content: center;
}

.btn-catalog {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 30px 35px;
   margin-top: 50px;
   color: var(--color-text);
   font-weight: 700;
   font-size: 16px;
   text-transform: uppercase;
   text-decoration: none;
   max-height: 50px;
   letter-spacing: 1px;
   /* Колір рамки */
   background-color: var(--color-text);
   /* Зрізані кути (лівий верхній, правий нижній) */
   clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
   transition: transform 0.2s ease;
   z-index: 1;
}

.btn-catalog::before {
   content: '';
   position: absolute;
   /* Товщина рамки */
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
   /* Колір фону всередині кнопки */
   background-color: var(--color-button-bg);
   /* Внутрішній контур зрізу */
   clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
   z-index: -1;
   transition: background-color 0.2s ease;
}

.btn-catalog:hover {
   transform: translateY(-2px);
   color: var(--color-secondary);
}

.btn-catalog:hover::before {
   background-color: var(--color-text);
}

.btn-arrow {
   display: inline-block;
   max-width: 0;
   opacity: 0;
   transform: translateX(-15px);
   transition: all 0.3s ease;
   white-space: nowrap;
   margin-left: 0;
   font-size: 18px;
}

.btn-catalog:hover .btn-arrow {
   max-width: 20px;
   opacity: 1;
   transform: translateX(0);
   margin-left: 10px;
   fill: var(--color-secondary);
}