* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

body {
    margin: 0;
    font-family: "Titillium Web", serif;
    font-weight: 400;
    font-style: normal;

    background-image: url('./images/background.jpg');
    background-size: 600px auto;
}

.c-header {
    padding: 20px 0;
    background: #f2f2f2;
    border-bottom: 2px solid #588989;

    font-family: "Grandstander", serif;
    font-size: 36px;
    font-weight: 900;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: center;
}

.c-header__title {
    margin: 0;
}

.c-header__title small {
    display: block;
    color: #c5543e;
    font-size: 24px;
}

.o-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.c-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.c-section__title {
    color: #ee8f3b;
    font-family: "Grandstander", serif;
    font-size: 32px;
    font-weight: 900;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: center;
}

.c-section__wrapper {
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-left: 2px solid white;
    border-right: 2px solid white;
}

.c-product-list {
    padding: 0;
    list-style: none;
}

.c-product-item {
    margin: 60px 0;
}

.c-product-item__title {
    margin-bottom: 20px;

    font-family: "Grandstander", serif;
    font-size: 24px;
    font-weight: 600;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: center;
}

.c-product-item__title strong {
    font-weight: 900;
}

.c-product-item__data {
    display: flex;
    gap: 40px;
}

@media (max-width: 560px) {
    .c-product-item__data {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 80px;
    }
}

.c-product-item__photo {
    float: left;
    margin-right: 20px;
    width: 40%;
    height: auto;

    border: 1px solid black;
    padding: 5px;
    background: white;
    object-fit: contain;
}

@media (max-width: 680px) {
    .c-product-item__photo {
        float: none;
        display: block;
        width: 100%;
        margin: auto;
        margin-bottom: 20px;
        max-height: 200px;
    }
}

.c-product-item__action {
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.c-product-item__message {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.c-product-item__label {
    display: block;
    color: #888;
}

.c-product-item__input {
    display: block;
    width: 100%;
}

.c-product-item__button {
     align-items: center;
     background-clip: padding-box;
     background-color: #ee8f3b;
     border: 1px solid transparent;
     border-radius: .25rem;
     box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
     box-sizing: border-box;
     color: #fff;
     cursor: pointer;
     display: inline-flex;
     font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 16px;
     font-weight: 600;
     justify-content: center;
     line-height: 1.25;
     margin: 0;
     min-height: 3rem;
     padding: calc(.875rem - 1px) calc(1.5rem - 1px);
     position: relative;
     text-decoration: none;
     transition: all 250ms;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
     vertical-align: baseline;
     width: auto;
 }

.c-product-item__button:hover,
.c-product-item__button:focus {
    background-color: #c5543e;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.c-product-item__button:hover {
    transform: translateY(-1px);
}

.c-product-item__button:active {
    background-color: #c5543e;
    box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
    transform: translateY(0);
}

/* UTILS */
[hidden] {
    display: none;
}