/**
 * Monogo_UnilayerSalonPlCustomForm — the custom form pages (USPM-146).
 *
 * CMS pages with an Amasty Custom Form (ssp, szkolenia-studio-wella) are served
 * by Magento (Luma). Their header, footer, font and base size come from the
 * salon theme of Monogo_UnilayerNativeChrome; this sheet only matches the form
 * and the product lists (widget, Page Builder carousel) to the Next.js storefront: brand red
 * #AF0236, square corners, the product tile type sizes.
 */

/* Amasty Custom Form */

.amform-form .label {
    color: #464646;
    font-size: 14px;
    font-weight: 500;
}

.amform-form .required > .label::after,
.amform-form ._required > .label::after {
    color: #AF0236;
}

.amform-form input[type="text"],
.amform-form input[type="email"],
.amform-form input[type="tel"],
.amform-form input[type="number"],
.amform-form select,
.amform-form textarea {
    border: 1px solid #c8c8c8;
    border-radius: 0;
    font-size: 14px;
}

.amform-form input[type="text"],
.amform-form input[type="email"],
.amform-form input[type="tel"],
.amform-form input[type="number"],
.amform-form select {
    height: 40px;
    padding: 0 12px;
}

.amform-form input:focus,
.amform-form select:focus,
.amform-form textarea:focus {
    border-color: #AF0236;
    box-shadow: none;
}

.amform-form .action.primary,
.amform-parent .action.primary {
    background: #AF0236;
    border: 1px solid #AF0236;
    border-radius: 0;
    font-weight: 600;
    padding: 10px 28px;
}

.amform-form .action.primary:hover,
.amform-form .action.primary:focus,
.amform-parent .action.primary:hover,
.amform-parent .action.primary:focus {
    background: #8c022b;
    border-color: #8c022b;
}

/*
 * Product lists in the page content: the Catalog Products List widget (grid)
 * and the Page Builder "Products" carousel, both inside
 * [data-content-type="products"]. Storefront tile look.
 */

.column.main [data-content-type="products"] .product-image-container {
    background: #f7f7f7;
}

/* The carousel slides have no gutter of their own (the grid has one). */
.column.main [data-content-type="products"] .widget-product-carousel .product-item {
    box-sizing: border-box;
    padding: 0 12px;
}

/* Two lines for every name, so the prices and buttons line up across the row. */
.column.main [data-content-type="products"] .product-item-name {
    min-height: 44px;
}

.column.main [data-content-type="products"] .product-item-name,
.column.main [data-content-type="products"] .product-item-link {
    color: #464646;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.column.main [data-content-type="products"] .product-item-link:hover {
    color: #AF0236;
    text-decoration: none;
}

.column.main [data-content-type="products"] .price-box .price {
    color: #AF0236;
    font-size: 16px;
    font-weight: 700;
}

/*
 * Luma shows the actions only on hover (desktop), hiding them with
 * `.products-grid .product-item-info:not(:hover):not(.active) .product-item-inner`:
 * always show them, as the storefront does. The selectors below outrank Luma's.
 */
.column.main [data-content-type="products"] .product-items .product-item .product-item-info:hover,
.column.main [data-content-type="products"] .product-items .product-item .product-item-info.active {
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.column.main [data-content-type="products"] .product-items .product-item .product-item-info .product-item-inner {
    background: none;
    border: 0;
    box-shadow: none;
    clip: auto;
    display: block;
    height: auto;
    margin: 0;
    overflow: visible;
    padding: 8px 0 0;
    position: static;
    width: auto;
}

.column.main [data-content-type="products"] .product-item-actions {
    display: block;
    margin: 0;
}

.column.main [data-content-type="products"] .actions-primary {
    display: block;
    width: 100%;
}

.column.main [data-content-type="products"] .product-items .product-item .actions-secondary {
    display: none;
}

.column.main [data-content-type="products"] .action.tocart.primary {
    background: #AF0236;
    border: 1px solid #AF0236;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    white-space: nowrap;
    width: 100%;
}

.column.main [data-content-type="products"] .action.tocart.primary:hover,
.column.main [data-content-type="products"] .action.tocart.primary:focus {
    background: #8c022b;
    border-color: #8c022b;
}