/* =================================================================
 * LensDelivery — Amasty Xsearch popup redesign (svitlinz-inspired)
 * Scoped to .amsearch-proto wrapper applied to the product list.
 * Uses higher specificity via `body` prefix so it overrides the
 * legacy popup styles baked into main.css without requiring them
 * to be removed.
 * ================================================================= */

/* ---------- Popup wrapper ---------- */
body .amsearch-product-list-wrap.amsearch-proto {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(20, 20, 20, 0.08);
    padding: 24px 28px 28px;
    box-sizing: border-box;
}

body .amsearch-proto .amsearch-product-list-container {
    padding: 0;
    margin: 0;
}

/* ---------- Section title ("ТОВАРИ") ---------- */
body .amsearch-proto .amsearch-block-header {
    font-size: 16px;
    font-weight: 700;
    color: #1e1e1e;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 18px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
body .amsearch-proto .amsearch-block-header .amsearch-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e1e1e;
}
body .amsearch-proto .amsearch-block-header .amsearch-count {
    font-weight: 500;
    color: #6a6a6a;
    font-size: 14px;
    margin-left: 6px;
}

/* ---------- Product grid ---------- */
body .amsearch-proto .amsearch-product-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ---------- Product card ---------- */
body .amsearch-proto .amsearch-item.product-item {
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 20px 18px 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    float: none;
    width: auto;
}
body .amsearch-proto .amsearch-item.product-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: #d4d4d4;
}

/* Card: name */
body .amsearch-proto .amsearch-item .product_name {
    margin-bottom: 16px;
}
body .amsearch-proto .amsearch-item .product_name a.product-item-link,
body .amsearch-proto .amsearch-item .product_name a.amsearch-link {
    font-size: 15px;
    font-weight: 700;
    color: #1e1e1e;
    line-height: 1.3;
    text-decoration: none;
    display: block;
    min-height: 40px;
    word-break: break-word;
}
body .amsearch-proto .amsearch-item .product_name a:hover {
    color: #2ab06f;
    text-decoration: none;
}
/* Amasty wraps matched substring in <strong> — highlight it green */
body .amsearch-proto .amsearch-item .product_name strong,
body .amsearch-proto .amsearch-item .product_name em {
    color: #2ab06f;
    font-weight: 700;
    font-style: normal;
    background: transparent;
}

/* Card: image */
body .amsearch-proto .amsearch-item .product_image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    width: 100%;
    aspect-ratio: 1.4 / 1;
    overflow: hidden;
}
body .amsearch-proto .amsearch-item .product_image a.amsearch-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
body .amsearch-proto .amsearch-item .product_image img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Card: details (price + cart button) */
body .amsearch-proto .amsearch-item .product-item-details {
    display: block;
    margin-top: auto;
    padding: 0;
    border: none;
}

/* Price */
body .amsearch-proto .amsearch-item .product_price_wrap {
    font-size: 20px;
    font-weight: 700;
    color: #1e1e1e;
    margin: 0 0 14px;
    line-height: 1;
}
body .amsearch-proto .amsearch-item .product_price_wrap .price,
body .amsearch-proto .amsearch-item .product_price_wrap .price-wrapper,
body .amsearch-proto .amsearch-item .product_price_wrap .price-container {
    font-size: 20px;
    font-weight: 700;
    color: #1e1e1e;
}
body .amsearch-proto .amsearch-item .product_price_wrap .price-label {
    display: none;
}

/* Cart button — green circle, right-aligned */
body .amsearch-proto .amsearch-item .amsearch-tocart-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
}
body .amsearch-proto .amsearch-item .amasty-xsearch-form {
    margin: 0;
    padding: 0;
}
body .amsearch-proto .amsearch-item button.action.tocart.primary.amsearch-tocart-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    background: #2ab06f;
    border: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(42, 176, 111, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
    line-height: 1;
    font-size: 0;
}
body .amsearch-proto .amsearch-item button.action.tocart.primary.amsearch-tocart-btn > span {
    display: none;
}
body .amsearch-proto .amsearch-item button.action.tocart.primary.amsearch-tocart-btn:hover {
    background: #24a063;
}
body .amsearch-proto .amsearch-item button.action.tocart.primary.amsearch-tocart-btn:active {
    transform: scale(0.96);
}
body .amsearch-proto .amsearch-item button.action.tocart.primary.amsearch-tocart-btn .amsearch-tocart-icon {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

/* ---------- Footer: "View all (N)" link ---------- */
body .amsearch-proto .view_all_results_btn_wrap {
    margin-top: 22px;
    text-align: center;
}
body .amsearch-proto .view_all_results_btn_wrap a.amsearch-link {
    display: inline-block;
    padding: 10px 22px;
    background: #f2f2f2;
    color: #1e1e1e;
    border-radius: 22px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease;
}
body .amsearch-proto .view_all_results_btn_wrap a.amsearch-link:hover {
    background: #e4e4e4;
    color: #1e1e1e;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    body .amsearch-proto .amsearch-product-list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 900px) {
    body .amsearch-proto .amsearch-product-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    body .amsearch-product-list-wrap.amsearch-proto {
        padding: 18px;
    }
    body .amsearch-proto .amsearch-product-list {
        grid-template-columns: 1fr;
    }
    body .amsearch-proto .amsearch-item.product-item {
        padding: 16px;
    }
}


/* =================================================================
 * Price block clutter (labels + Mirasvit Rewards)
 * ================================================================= */

/* Kill "Ціна:" and other price labels */
body .amsearch-proto .amsearch-item .product_price_wrap .price-label,
body .amsearch-proto .amsearch-item .product_price_wrap .price-as-configured .price-label,
body .amsearch-proto .amsearch-item .product_price_wrap [class*="price-label"] {
    display: none !important;
}

/* Drop the verbose cashback promo sentence entirely */
body .amsearch-proto .amsearch-item .rewards-notification-block,
body .amsearch-proto .amsearch-item .rewards__notification,
body .amsearch-proto .amsearch-item .mst-rewards-message {
    display: none !important;
}

/* Tiny green cashback badge under the price */
body .amsearch-proto .amsearch-item .rewards__product-earn-points,
body .amsearch-proto .amsearch-item .rewards__product-points {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #2ab06f !important;
    background: transparent !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1px !important;
}
body .amsearch-proto .amsearch-item .rewards__product-earn-points .price,
body .amsearch-proto .amsearch-item .rewards__product-points .price {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #2ab06f !important;
    background: transparent !important;
}
body .amsearch-proto .amsearch-item .rewards__product-earn-points .points-loader {
    display: none !important;
}
body .amsearch-proto .amsearch-item .rewards__product-points:empty {
    display: none;
}

/* Clean vertical stack: price + small cashback */
body .amsearch-proto .amsearch-item .product_price_wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    line-height: 1;
}
body .amsearch-proto .amsearch-item .product_price_wrap .price-box,
body .amsearch-proto .amsearch-item .product_price_wrap .price-final_price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* =================================================================
 * Header: hide the duplicate "View All" + count (kept at the bottom)
 * ================================================================= */
body .amsearch-proto .amsearch-block-header a.amsearch-link.-view-all,
body .amsearch-proto .amsearch-block-header .amsearch-count {
    display: none !important;
}

/* =================================================================
 * Harden the grid against legacy CSS (floats/flex from main.css)
 * ================================================================= */
body .amsearch-proto .amsearch-product-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    float: none !important;
}
body .amsearch-proto .amsearch-item.product-item {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}
@media (max-width: 1200px) {
    body .amsearch-proto .amsearch-product-list {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 900px) {
    body .amsearch-proto .amsearch-product-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 560px) {
    body .amsearch-proto .amsearch-product-list {
        grid-template-columns: 1fr !important;
    }
}