/*
 * Computer product detail page styles.
 * Extracted from module/computer/product/product.style.phtml during audit Step 5.
 *
 * PHP-interpolated brand colours (firstColor, secondColor, derived hover)
 * replaced with CSS custom properties from tokens.css + head.tokens.phtml.
 * The .btn-comprar:hover derived `adjustBrightness(firstColor, -20)` was
 * replaced with `--lb-brand-hover` (declared per-domain in head.tokens.phtml).
 */

#voltar-atras{ text-align: left; font-size: 16px; color: var(--lb-brand); }
#voltar-atras a{ font-size: 16px; color: var(--lb-brand); }
#voltar-atras a:hover{ color: var(--lb-brand-alt); }

#voltar-atras i{ font-size: 16px; }

.btn-comprar{
    padding: 10px 20px;
    background: var(--lb-brand);
    border: 0;
    font-weight: 400;
    font-size: 16px;
    color: #FFF !important;
    outline: none;
    border-radius: 4px;
}

.btn-comprar-sm{
    padding: 4px 12px;
    background: #FFF;
    color: var(--lb-brand);
    border: 2px solid var(--lb-brand);
    font-weight: 500;
    font-size: 14px;
    outline: none;
    border-radius: 4px;
}

.btn-comprar-sm:hover{
    background: var(--lb-brand);
    color: #FFF;
    cursor: pointer;
}

.btn-comprar:hover{
    background: var(--lb-brand-hover);
    cursor: pointer;
}

select[id^=quantity]{
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
}

select[id^=quantity] option{
    font-size: 16px;
    font-weight: 600;
}

.product-detail--key-features--title{
    display: none;
}

.tick-list{
    line-height: 28px;
    margin-top: 20px;
    font-weight: 500;
    font-size: 16px;
}

#assoc_prod{
    margin-top: 30px;
    line-height: 24px;
}

.elem{
    height: 100%;
    width: 180px !important;
    display: inline-block;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    vertical-align: top;
}

.elem img{
    width: 140px !important;
    margin: 0 auto;
}

.move-left-wrapper{
    position: absolute;
    float: left;
    color: #337ab7;
    background: #FFF;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.move-right-wrapper{
    position: absolute;
    float: right;
    color: #337ab7;
    right: 0;
    background: #FFF;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.move-scroller-left:hover,
.move-scroller-right:hover{
    cursor: pointer;
    opacity: 0.7;
}

#resumeTabs{
    margin-top: 40px;
    text-align: left;
}

#resumeTabs .panel-group {
    margin-bottom: 0;
}

#resumeTabs .tab-pane .panel{
    background-color: #fff;
    border: 0;
    border-radius: 0;
}

#resumeTabs .tab-pane .panel .panel-heading{
    padding: 15px;
    font-size: 24px;
    background: #f5f5f5 !important;
    font-weight: 500;
}

#resumeTabs ul.nav li{
    font-size: 20px;
    font-weight: 500;
    margin-right: 16px;
    /*
     * Push the .tab-content frame 10px below the active tab label so
     * "Funcionalidades e Especificações" has breathing room before the
     * first card starts. Sits on the <li> (not the <a> or tab-content)
     * because it's part of the tab nav row's rhythm — same trick used
     * by user via devtools on 2026-05-21.
     */
    margin-bottom: 10px;
}

#resumeTabs .tab-content{
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

#resume{
    padding: 26px 40px;
    text-align: justify;
    line-height: 24px;
    margin-bottom: -32px;
    font-size: 16px;
}

#resume h4{
    font-size: 20px;
    font-weight: 700;
}

#resume p{
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 30px;
}

#resume ul{
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 28px;
}

.common-product-detail-overview--specification,
.product-detail--specification{
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
}

.common-product-detail-overview--specification-body,
.product-detail--specification td{
    padding: 20px;
}

.common-product-detail-overview--specification-row,
.product-detail--specification-row{
    width: 62%;
}

.common-product-detail-overview--specification-row:nth-child(odd),
.product-detail--specification-row:nth-child(odd){
    background: #f3f3f3;
}

.common-product-detail-overview--specification-row:nth-child(even),
.product-detail--specification-row:nth-child(even){
    background: #FFF;
}

.common-product-detail-overview--specification-header,
.product-detail--specification-header{
    width: 28%;
    padding: 20px;
}

.ellipsis-text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 18px;
}

/*
 * REFRESH 2026-05-21 — desktop PDP specifications accordion.
 *
 * Replaces the previous "continuous gray strip" look (all headers had
 * `background: #f7f7f9` so 8+ collapsed cards merged into one flat
 * cinza without clear hierarchy). New pattern follows MediaMarkt /
 * Brother / Best Buy:
 *   - cards are visually distinct (white bg, 1px border, 6px radius,
 *     10px gap between)
 *   - headers transparent by default; bg + brand colour kick in only
 *     on hover / when expanded (clear interaction affordance)
 *   - title typography promoted: 15→16px, 500→600 weight, default
 *     colour `--lb-text` (brand reserved for active state)
 *   - interior table loses the `#fafafa` alt-row fill (more cinza on
 *     top of cinza), uses muted labels + 500-weight values so the
 *     value reads first (Apple/MediaMarkt convention)
 *   - chevron stays muted by default, lights up to brand on hover /
 *     when expanded
 *
 * Rollback: restore this block from git history (delimited by REFRESH
 * 2026-05-21 markers).
 */
/*
 * Connected list — cards stack flush, shared borders, no gap.
 *
 * NO `.accordion { border }` here on purpose. The parent
 * `#resumeTabs .tab-content` already paints a 1px #ddd border on
 * left/right/bottom (legacy tab-system frame). Adding another border
 * on .accordion produced two concentric lines along the right edge
 * (caught 2026-05-21 in devtools).
 */
.accordion{
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: transparent;
}

.accordion .card{
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    background: var(--lb-card);
    overflow: hidden;
    transition: background .15s ease;
}

.accordion .card + .card{
    border-top: 1px solid var(--lb-border);
}

.accordion .card .card-header{
    padding: 0;
    background: transparent;
    border-bottom: 0;
    text-decoration: none;
    font-weight: 600;
}

.accordion .card .card-header h5{
    margin: 0;
}

.accordion .card .card-header .btn{
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 48px 16px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lb-text);
    text-decoration: none;
    border-radius: 0;
    border: 0;
    background: transparent;
    position: relative;
    transition: background .15s ease, color .15s ease;
}

.accordion .card .card-header .btn:hover,
.accordion .card .card-header .btn:focus{
    background: var(--lb-surface);
    text-decoration: none;
    color: var(--lb-brand);
    box-shadow: none;
    outline: 0;
}

.accordion .card .card-header .btn[aria-expanded="true"]{
    color: var(--lb-brand);
    background: var(--lb-surface);
}

.accordion .card .card-header .btn::after{
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--lb-text-muted);
    transition: transform .2s ease, color .15s ease;
}

.accordion .card .card-header .btn:hover::after,
.accordion .card .card-header .btn:focus::after,
.accordion .card .card-header .btn[aria-expanded="true"]::after{
    color: var(--lb-brand);
}

.accordion .card .card-header .btn[aria-expanded="true"]::after{
    transform: translateY(-50%) rotate(180deg);
}

.accordion .card .card-body{
    background: var(--lb-card);
    padding: 8px 22px 18px;
}

.accordion table.common-product-detail-overview--specification{
    width: 100%;
    border-collapse: collapse;
}

.accordion table.common-product-detail-overview--specification th,
.accordion table.common-product-detail-overview--specification td{
    padding: 14px 16px;
    vertical-align: top;
    border-bottom: 1px solid var(--lb-border);
    font-size: 14px;
    line-height: 1.5;
}

.accordion table.common-product-detail-overview--specification tr:nth-child(odd){
    background: transparent;
}

.accordion table.common-product-detail-overview--specification tr:last-child th,
.accordion table.common-product-detail-overview--specification tr:last-child td{
    border-bottom: 0;
}

.accordion table.common-product-detail-overview--specification th{
    font-weight: 400;
    width: 38%;
    color: var(--lb-text-muted);
}

.accordion table.common-product-detail-overview--specification td{
    color: var(--lb-text);
    font-weight: 500;
}

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

/*
 * Horizontal product scroller (Produtos Relacionados, Descubra outras
 * opções). `overflow-x: auto` so the user can ALSO navigate with
 * touchpad swipe / mousewheel / mobile touch in addition to the arrow
 * buttons — relying on arrows alone left users stranded when the JS
 * showing them broke (the `.invisible !important` foot-gun fixed in
 * the template).
 *
 * scrollbar-width: thin + hidden via ::-webkit-scrollbar so the bar
 * doesn't add visual noise to the card row but the scroll IS available
 * to assistive tech / keyboard / touch.
 */
.scroller{
    height: 100%;
    max-width: 1320px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.scroller::-webkit-scrollbar {
    display: none;
}

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

.scroller .scroller-element a,
.scroller .scroller-element .ellipsis-text a{
    color: #333 !important;
    text-decoration: none;
}

.scroller .scroller-element a:hover,
.scroller .scroller-element a:focus,
.scroller .scroller-element .ellipsis-text a:hover,
.scroller .scroller-element .ellipsis-text a:focus{
    color: var(--lb-brand-alt) !important;
    text-decoration: none;
}

.scroller .scroller-element:first-of-type{
    border-left: 0;
}

.scroller .scroller-element:last-of-type{
    border-right: 0;
}

.scroller .scroller-element img{
    width: 140px !important;
    margin: 0 auto;
    text-align: center;
}

.move-left-wrapper{
    position: absolute;
    left: 10px;
    color: #337ab7;
    background: transparent;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0.75;
}

.move-right-wrapper{
    position: absolute;
    float: right;
    color: #337ab7;
    right: 10px;
    background: transparent;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0.75;
}

#infoContainer{
    width: 100% !important;
}

.btn-comprar-green{
    background: #008000 !important;
}

.btn-comprar-green:hover{
    background: #006600 !important;
}

.btn-outline-comprar{
    padding: 8px 25px;
    background: #FFF !important;
    border: 2px solid var(--lb-brand) !important;
    font-weight: 500;
    font-size: 14px;
    color: var(--lb-brand) !important;
    outline: none;
    border-radius: 4px;
}

.btn-outline-comprar:hover{
    background: var(--lb-brand) !important;
    color: #FFF !important;
}

#productForm a{
    color: var(--lb-brand);
}

#goBack{
    text-align: left;
    font-size: 20px;
    color: #333;
}

#goBack a{
    color: #333;
    vertical-align: top;
}

#goBack a:hover > .fas{
    color: var(--lb-brand-alt);
}

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

.scroller-wrapper .leftArrow,
.scroller-wrapper .rightArrow{
    padding: 8px 13px;
    border: 1px solid #d7d7d7;
    background: #FFF;
    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: #F7FAFA;
    border-color: #D5D9D9;
}

/* From inline <style> blocks in computer/product/product.phtml (Step 6b) */

/* Testseek widget overrides */
.ts_main_template .ext_link_ts,
.ts_main_template .flag{ display: none !important; }
.ts_main_template{ margin-top: 20px; }
.ts_main_template .testseek_main .ts_er_top_header {
    line-height: 28px;
    font-size: 18px !important;
    margin-bottom: 20px;
    color: #333 !important;
}
.ts_main_template .er_dist_header{ font-size: 18px !important; color: #333 !important; }
.ts_main_template .l{ text-align: left !important; color: #333 !important; }
.ts_main_template .er_list_header{ font-size: 18px !important; color: #333 !important; }
.ts_main_template .ts_show_if_escore{ line-height: 41.6px !important; color: #333 !important; }

/* Details container */
#detailsContainer{
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    padding-right: 10px;
    max-height: 375px;
    overflow-y: auto;
}

#detailsContainer p{
    padding: 0 0 !important;
    margin: 0 !important;
}

#detailsContainer:has(> br:nth-of-type(1)) > p{
    padding-top: 20px !important;
}

#detailsContainer:has(> br:nth-of-type(2)) > p{
    padding-top: 20px !important;
}

div#detailsContainer p:first-of-type{
    padding-top: 0 !important;
    padding-bottom: 20px !important;
}

div#detailsContainer p:last-of-type{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Compact header in product page */
.headerMini {
    height: 80px !important;
}

.productInfoDescription {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* Labels search button */
#searchLabels {
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 500;
    height: 37px !important;
    background: #f6f6f6;
}

#searchLabels:hover {
    background: #dddddd;
    color: inherit;
}

/* Compatible printers section */
.compatible-printers-section {
    margin: 25px 0 30px 0;
    text-align: left;
    background: #fff;
    border: 1px solid #0066cc;
    border-radius: 8px;
    padding: 20px;
}

.compatible-printers-header {
    font-size: 17.6px;
    font-weight: 600;
    color: #0066cc;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.compatible-printers-header i {
    font-size: 17.6px;
}

.compatible-printers-count {
    font-size: 13.6px;
    color: #888;
    font-weight: 400;
}

.printer-families-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.printer-family-card {
    background: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 100%;
}

.printer-family-card:only-child {
    max-width: 100%;
}

.printer-family-header {
    background: #0066cc;
    color: white;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.printer-family-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 13.6px;
}

.printer-models-list {
    padding: 10px 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.printer-models-list li {
    flex: 0 0 auto;
}

.printer-family-card:only-child .printer-models-list {
    column-count: auto;
    column-width: 180px;
    display: block;
}

.printer-family-card:only-child .printer-models-list li {
    break-inside: avoid;
}

.printer-model-link {
    display: block;
    padding: 6px 15px;
    color: #333;
    text-decoration: none;
    font-size: 15.2px;
    white-space: nowrap;
}

.printer-model-link:hover {
    background: var(--lb-brand-tint);
    color: #0066cc;
    text-decoration: none;
}

@media (max-width: 576px) {
    .printer-family-card {
        flex: 1 1 100%;
    }
    .printer-family-card:only-child .printer-models-list {
        column-count: 1;
    }
}