/*
 * Computer homepage styles.
 * Extracted from module/computer/index/index.style.phtml during audit Step 5.
 *
 * PHP-interpolated brand colours (firstColor, secondColor, buttonColor-hover)
 * replaced with CSS custom properties from tokens.css + head.tokens.phtml.
 *
 * The commented-out reference to firstColor on .productLink (which the
 * original PHP wrapped in a slash-star block) is preserved as a CSS
 * comment without nesting block-comment markers (CSS does not allow
 * comment nesting — a stray "* slash" inside a comment closes the outer
 * one and parser drops everything until the next valid token, which
 * silently broke the multi-selector colour rule below).
 */

/*
 * Product card description link. Production renders this in dark grey
 * (#333) — typical e-commerce convention so the eye scans descriptions
 * as body text, not as "click here!" links. Dev had a `lb-text-brand`
 * wrapper around the link AND BS4's reboot `a { color: #007bff }` rule
 * fighting the inherited dark color, so descriptions read as bright blue.
 *
 * Hardened against the BS4 `a {}` reboot:
 *   1. `color: #333 !important` — beats the reboot's specificity (0,0,1)
 *      and any wrapper utility (lb-text-brand etc.) that might re-apply.
 *   2. Same `!important` cascaded onto the inner <span> so even if a
 *      future wrapper sets a color on the div, the span (which holds the
 *      visible text) reads dark.
 */
.productLink,
.productLink > span,
.productLink > [itemprop="description"] {
    color: #333 !important;
}

.productLink {
    font-size: 16px;
    font-weight: 500;
    display: block;
    text-decoration: none;
}

.productLink > span,
.productLink > [itemprop="description"]{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.productLink:hover,
.productLink:hover > span,
.productLink:hover > [itemprop="description"]{
    color: var(--lb-brand-alt) !important;
    text-decoration: none;
}

.prod .label,
.prod .badge{
    display: inline !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: .4em .8em;
    padding-top: .32em;
}

.prod .prodInfo .label,
.prod .prodInfo .badge{
    border-radius: 4px;
}

.prod .prodBrand .label,
.prod .prodBrand .badge{
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
}

.prod .prodPromo .label,
.prod .prodPromo .badge{
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 4px;
}

#productsFilter span {
    font-size: 16px;
    font-weight: 500;
}

#pageSort a,
#pageSort select,
#pageSort span{
    font-size: 11.5px;
}

.page{
    width: 45px;
    height: 45px;
    line-height: 45px;
    margin: 0 7.5px;
    background: var(--lb-brand);
    float: left;
    font-size: 18px;
    font-weight: 400;
    color: #FFF !important;
    border-radius: 4px;
    border: 0;
}

.page-disabled{
    color: #002d55 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.page:not(.page-disabled):hover{
    background: #002d55;
    cursor: pointer;
}

.page-disabled:hover{
    cursor: not-allowed !important;
}

#productsFilter select#limit{
    margin: 0 -2px;
}

#productsFilter a,
#productsFilter select,
#productsFilter span {
    font-size: 16px;
    font-weight: 500;
}

#brandsContainer table{
    width: 100%;
}

#brandsContainer table td{
    width: 25%;
}

#brandsContainer table td img{
    width: 85%;
    margin: 0 auto;
    display: block;
}

#brandsContainer table td img:hover{
    opacity: 0.7;
}

.btnConsumable{
    padding: 6px;
    background: var(--lb-card);
    border: 2px solid var(--lb-brand);
    color: var(--lb-brand);
    outline: none;
    font-size: 12px;
    font-weight: 700;
    width: 165px;
    border-radius: 4px;
}

.btnConsumable:hover{
    background: var(--lb-brand);
    color: #fff;
    cursor: pointer;
}

#relatedPrinter:hover{
    opacity: 75%;
}

.relatedProduct{
    color: var(--lb-brand);
}

.relatedProduct:hover{
    color: var(--lb-accent-hover);
}

.label-orange{
    background: var(--lb-accent);
}

/* scroller */

.scroller {
    height: 100%;
    max-width: 1320px;
    overflow-x: hidden;
    white-space: nowrap;
}

.scroller-wrapper{
    width: 100%;
    height: 300px;
    position: relative;
}

.scroller .scroller-element{
    height: 100%;
    width: 150px !important;
    display: inline-block;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    vertical-align: top;
    padding: 12px;
}

#homeRecentlyViewedContents .scroller-wrapper{
    height: 250px !important;
}

#recentlyViewedProductsScroller .scroller-element:first-of-type{
    background: var(--lb-card);
    height: 200px;
}

#recentlyViewedProductsScroller .scroller-element:not(:first-of-type){
    background: var(--lb-card);
    box-shadow: 0 0.5rem 1rem #0000001a;
    height: 200px;
}

#recentlyViewedProductsScroller .scroller-element:not(:first-of-type):hover{
    box-shadow:
        0 4rem 4rem #0000000d,
        0 2rem 2rem #0000000d,
        0 1rem 1rem #0000000d,
        0 0.5rem 0.5rem #0000000d,
        0 0.25rem 0.25rem #0000000d,
        0 0.125rem 0.125rem #0000000d;
}

.consumableBrandImage,
.groupImage{
    border-radius: 4px;
    box-shadow: 0 0.5rem 1rem #0000001a;
    padding: 10px;
    background: var(--lb-card);
}

.consumableBrandImage:hover,
.groupImage:hover{
    box-shadow:
        0 4rem 4rem #0000000d,
        0 2rem 2rem #0000000d,
        0 1rem 1rem #0000000d,
        0 0.5rem 0.5rem #0000000d,
        0 0.25rem 0.25rem #0000000d,
        0 0.125rem 0.125rem #0000000d;
}

.scroller-wrapper .leftArrow,
.scroller-wrapper .rightArrow{
    padding: 8px 13px;
    border: 1px solid var(--lb-border);
    background: var(--lb-card);
    border-radius: 8px;
    box-shadow: 0 2px 5px 0 rgba(213, 217, 217, .5);
    cursor: pointer;
    font-size: 18px;
}

.scroller-wrapper .leftArrow:hover,
.scroller-wrapper .rightArrow:hover{
    background-color: var(--lb-surface);
    border-color: var(--lb-border);
}

.scroller .scroller-element .ellipsis-text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.scroller .scroller-element .ellipsis-text a {
    color: var(--lb-text) !important;
}

.recentlyViewedAuthLink{
    text-decoration: underline;
    font-weight: 500;
}

.recentlyViewedAuthLink:hover{
    text-decoration: none;
    cursor: pointer;
}

/*
 * Recently-viewed widget — replaces the inline-style nest that was
 * historically baked into module/api/api.php (the AJAX endpoint that
 * injects this block onto the homepage). The widget renders an h2
 * heading + a horizontal scroller of cards, optionally preceded by a
 * "log in for personalised experience" first card.
 */
.lb-recently-viewed-header {
    text-align: left;
}

/*
 * 20px matches the other homepage section titles (`.lb-fs-2`), which now
 * resolves to 20px after the utilities.css rem→px cleanup. The widget
 * heading reads as a semantic peer of "Consumíveis em destaque",
 * "Impressoras Brother em destaque", etc.
 */
.lb-recently-viewed-title {
    font-weight: 500;
    font-size: 20px;
    margin: 0;
    line-height: 1.2;
}

.lb-recently-viewed-scroller {
    text-align: left;
}

.lb-recently-viewed-arrow-slot {
    position: absolute;
    top: 31%;
    z-index: 100;
}

.lb-recently-viewed-arrow-slot--left {
    left: 0;
}

.lb-recently-viewed-arrow-slot--right {
    right: 0;
}

/*
 * 50px — large enough to read as the "log in" affordance card, balanced
 * against the 100px product thumbnails on the same row.
 */
.lb-recently-viewed-auth-icon {
    font-size: 50px;
    color: var(--lb-brand);
}

/*
 * "para uma experiência personalizada" caption under "Faça login".
 * Was `line-height: 1.5rem` (absolute 24px) — far too much vertical
 * gap for a 12px <small>; the caption read as triple-spaced. Switched
 * to a relative 1.3 so each wrapped line sits tight under the next.
 */
.lb-recently-viewed-auth-tagline {
    line-height: 1.3;
}

/*
 * 20px keeps the price as the strongest element in the 150px-wide card
 * without consuming the whole row height.
 */
.lb-recently-viewed-price {
    text-align: left;
    color: var(--lb-price-promo);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
}

.lb-recently-viewed-price--on-request {
    font-size: 12px;
}

.lb-recently-viewed-meta {
    width: 100%;
    text-align: left;
    margin-top: 5px;
    font-size: 12px;
}

.lb-recently-viewed-meta-sku {
    font-weight: 500;
}

/* Homepage news article card — replaces inline min-height in index.phtml. */
.lb-news-article-card {
    min-height: 420px;
}

/* Homepage featured-product body padding — replaces inline margin in index.phtml. */
.lb-featured-product-body {
    margin: 10px 10px 0 10px;
}

.imageContainer{
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imageContainer img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.articleTitle{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    font-size: 14px;
    font-weight: 500;
    color: var(--lb-brand);
    line-height: 21px;
}

.articleDescription{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

.article:hover{
    cursor: pointer;
}

.popup.newsArticlePopUp .popup-close:hover{
    color: var(--lb-brand);
}

.parentGroupName{
    max-width: 86%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.popup-header{
    display: block;
}

/* From inline <style> in computer/index/index.phtml (Step 6b) */
.headerMini{
    height: 80px !important;
}

.prod{
    padding-bottom: 20px;
}

.prod:hover{
    box-shadow: 0 -12px 30px #0000001a;
    border-radius: 4px;
}

.addToCartContainer{
    background: var(--lb-card);
    box-shadow: 1px 20px 30px #0000001a;
    border-radius: 4px;
}

.productExtraImage{
    cursor: pointer;
}