/* Puzzle Advance — theme stylesheet.
 *
 * Ours, loaded after the old site's bundle (Litho + base.css + main.css), so it wins where it has to.
 * One section per part of the theme: the widgets, the chrome, the catalogue and the account pages.
 *
 * Loaded last of all, and not from this folder: the css of an individual SITE, edited in the
 * backoffice and stored on its website row. Anything set there wins over this file.
 */

:root {
  /* --color-accent: #123456; */
  /* --font-body: system-ui, sans-serif; */
}


/* ==========================================================================
   widgets-a
   ========================================================================== */

/*
 * Widgets batch A - rules that were typed, block by block, into the old site's free css box and
 * belong to the component instead. Merged into theme.css; scoped by the class the core's wrapper
 * puts on every block (.widget-<tag>) or by a class the widget itself emits.
 */

/* hero_parallax: the five inner pages all set their title to 4rem, at every width, as the old site
   did. Only two of them (blocks 199 and 204) also tightened the line height; the others kept
   Litho's h1 line height. */
.widget-hero_parallax h1 {
    font-size: 4rem;
}

.widget-hero_parallax[data-block-id="199"] h1,
.widget-hero_parallax[data-block-id="204"] h1 {
    line-height: 100%;
}

/*
 * featured_icons, style = card: the service pages' "O que entregamos" / "Como trabalhamos". A white
 * rounded panel over the section's picture, pushed down from the block above.
 */
section.featured-icons-card {
    padding: 120px 0 !important;
    margin-top: 120px !important;
    border-bottom: none !important;
}

section.featured-icons-card h4 {
    margin-top: 0 !important;
}

section.featured-icons-card .title-col {
    margin-bottom: 0 !important;
}

section.featured-icons-card .container {
    background: #fff;
    border-radius: 16px;
}

section.featured-icons-card .row-grid {
    justify-content: flex-start !important;
    padding-bottom: 32px;
}

@media (max-width: 578px) {
    section.featured-icons-card .container {
        margin-left: 15px;
        margin-right: 15px;
        width: auto;
    }
}


/* ==========================================================================
   widgets-b
   ========================================================================== */

/*
 * Widgets B: advantages, downloads_list, form_contact, google_maps, hero, html_block.
 *
 * What the old blocks typed into their free css box, moved to where it belongs - a property of
 * the component, the same on every page - plus the few rules the new markup needs. base.css and
 * main.css already carry the rest (.widget-html-block headings and lists, .widget-google-maps).
 */

/* advantages: what blocks 190 and 202 both typed into className. */
.widget-advantages > section {
    padding: 74px 0 !important;
}

.widget-advantages .left-img {
    border-radius: 8px;
}

.widget-advantages .feature-box-icon {
    height: 75px;
    width: 75px;
    margin-right: 24px;
}

/* hero: the "no_fullscreen" option - a band, not the window. */
.widget-hero .pa-hero-short {
    min-height: 400px;
}

/* html_block: the table look the old table_style box was for, now the same on every page. */
.widget-html-block table {
    width: 100%;
    margin-bottom: 25px;
    border-collapse: collapse;
}

.widget-html-block th,
.widget-html-block td {
    padding: 8px 12px;
    border: 1px solid #e4e4e4;
    vertical-align: top;
}

.widget-html-block th {
    background: #f7f7f7;
    font-weight: 600;
}

/* form_contact: the honeypot, out of sight and out of the tab order (tabindex in the markup). */
.form_contact_widget .pa-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* downloads_list: the whole card is the link; it keeps the text colour, not the link colour. */
.widget-downloads_list a.feature-box {
    display: block;
    color: inherit;
}


/* ==========================================================================
   chrome
   ========================================================================== */

/*
 * Puzzle Advance - header and footer, on top of the old site's base.css and main.css.
 * Only what the converted chrome added; everything else is the old stylesheets, untouched.
 */

/* Text for screen readers only: the newsletter's field label. */
.pa-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The honeypot: out of sight and out of the tab order, filled only by scripts. */
.pa-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The site name, where the brand has no logo file yet. */
#top-menu .navbar-brand span {
    font-size: 18px;
    white-space: nowrap;
}

/* The current language in the switcher. */
.header-language .dropdown-menu li.active > a {
    font-weight: 600;
}

/* The quote list: the empty line quote.js shows when there is nothing in it. */
#cartOffcanvas .cart-empty {
    margin: 30px 0;
    color: #6f6f6f;
}

/* The newsletter's answer, which the old site drew under the field. */
.newsletter-footer .form-results {
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 18px;
    z-index: 2;
}

.newsletter-footer .form-results.is-success {
    background: #e7f4ea;
    color: #1e6b33;
}

.newsletter-footer .form-results.is-error {
    background: #fbeaea;
    color: #9b1c1c;
}

/* A footer link that resolved to nothing is shown as text, in the links' own colour. */
#main-footer .footer-top ul li > span {
    opacity: .6;
}


/* ==========================================================================
   catalog
   ========================================================================== */

/*
 * Puzzle Advance: the catalogue - category page, product page, product and category cards.
 *
 * What the old pages carried inline (style="..." and a <style> block in templates/product.php),
 * moved here unchanged in value. The classes the old markup already had are styled by base.css
 * and main.css; these are the pa-* hooks that replaced the inline styles.
 */

/*----------------------------------- category page -----------------------------------*/

/* "section." on both: Litho's section.half-section / section.big-section set the padding with a
   heavier selector, and the old page set these inline. */
section.pa-catalog-title {
    padding-top: 30px;
    padding-bottom: 30px;
}

section.pa-category-section {
    max-width: 1750px;
    margin: 40px auto 0;
    padding-right: 2%;
    padding-left: 2%;
}

/* base.css styled these through the old body class "category-page", which the search page did not
   carry - the core's <body> has no page classes, so they are scoped to the title band instead. */
.pa-catalog-title:not(.pa-is-search) h1 {
    font-weight: 700 !important;
    font-size: 42px;
    line-height: normal;
}

.pa-catalog-title:not(.pa-is-search) h2 {
    font-size: 16px;
    font-weight: 400;
    line-height: normal !important;
}

.pa-category-image {
    max-height: 150px;
    width: auto !important;
    margin: 0 auto;
    display: block;
}

.pa-category-description {
    margin-top: 2rem;
    margin-bottom: 4rem;
    font-size: 1.25em;
    line-height: 175%;
}

.pa-product-section {
    margin: 0 auto;
    overflow: visible;
    min-height: 400px;
}

.pa-no-results {
    text-align: center;
    padding-top: 120px;
}

.pa-pagination {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* The old column held one select per filter; a list of boxes is taller, so it scrolls. */
.jnf-product-model-aside ul {
    overflow-y: auto;
}

.pa-filter-head b {
    font-size: 19px;
    font-weight: 700;
}

.pa-filter-head .jnf-close-series-aside-btn {
    margin-left: auto;
    font-size: 16px;
}

/* list-style-02 makes every <li> a flex row; a filter is a title over its select. */
.jnf-product-model-aside li.pa-filter {
    display: block;
}

.pa-filter-title {
    display: block;
    margin: 14px 2px 2px 2px;
    font-size: 14px;
}

.pa-filter-select,
.jnf-product-model-aside .select2-container {
    width: 100% !important;
}

.jnf-product-filter-reset-btn {
    cursor: pointer;
}

/*---------------------------------------- cards ----------------------------------------*/

.pa-band-title {
    font-size: 30px;
    margin-bottom: 60px;
}

/* Fitted inside the 300px box. style.css sets .jnf-related-products .swiper-slide img to
   height:auto !important, so the selector has to outweigh it - the old site did it inline. */
.pa-slide-image,
.jnf-related-products .swiper-slide img.pa-slide-image {
    height: 100% !important;
    width: 100% !important;
    display: block;
    object-fit: contain;
}

/*------------------------------------- product page -------------------------------------*/

.pa-product-hero-inner {
    margin-left: 50px;
}

.pa-product-hero-title {
    max-width: 590px;
    overflow-wrap: normal;
}

.pa-product-hero-title .first {
    max-width: 570px;
    word-break: normal;
}

.pa-product-main {
    padding-top: 40px;
    padding-bottom: 40px;
}

.pa-product-name {
    font-size: 30px;
    font-weight: 200 !important;
    line-height: 120%;
}

.pa-product-downloads {
    margin-top: 16px;
}

.pa-download-locked {
    color: #000;
    font-size: 13px;
    display: inline-block;
    padding: 6px;
}

.show-more-btn {
    border-bottom: none;
}

.show-more-btn i {
    font-size: 14px;
}

.pa-product-tabs {
    padding-bottom: 40px;
}

.pa-related {
    padding-top: 80px;
}

.pa-related img {
    max-height: 350px;
}

.pa-product-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/*---------------------------------- variations table ----------------------------------*/

.pa-variations {
    background: #f7f7f7;
    padding-top: 60px;
    padding-bottom: 40px;
}

.pa-variations-inner {
    margin-right: 10%;
    margin-left: 10%;
    border-radius: 16px;
}

#product-datatable {
    width: 100%;
    min-width: 1048px;
    margin: 0 auto;
}

#product-datatable thead th {
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    min-width: fit-content;
}

#product-datatable th,
#product-datatable td {
    text-align: left;
    min-width: 80px;
}

.pa-variation-swatch {
    float: left;
    background-size: cover;
}

.pa-variation-qty {
    text-align: center;
    max-width: 80px;
}

.pa-stock-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
}

.pvar-stock-bullet {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50px;
}

.pa-icon-24 {
    font-size: 24px;
}

.pa-icon-off {
    color: #e2e2e2;
}

.dt-scroll-body {
    overflow-y: hidden !important; /* keeps the scrolled body in line with its headers */
}

.dt-filter {
    font-size: 11px;
    width: 100%;
    min-width: 70px;
}

#dt-search-0 {
    border-radius: 0 !important;
}

.dataTables_scrollHead th,
.dataTables_scrollBody td {
    text-align: left;
}

.dt-column-order {
    top: -5px;
}

.dt-column-title {
    text-align: left;
}

#product-datatable tbody tr:hover > td,
#product-datatable tbody tr:hover > th,
.dataTables_wrapper .dataTables_scrollBody #product-datatable tbody tr:hover > td,
.dataTables_wrapper .dataTables_scrollBody #product-datatable tbody tr:hover > th {
    background: #f2f2f2;
}

#product-datatable td.highlight-col,
#product-datatable th.highlight-col {
    background: #f7f7f7;
}

th.dtfc-fixed-end > * {
    display: none;
}

.dt-center,
.dt-center > .dt-column-header span {
    text-align: center;
}

.pa-variation-card {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    height: 100%;
    padding: 0 16px 16px;
}

.pa-variation-card-image {
    max-height: 200px;
}

.pa-variation-card-name {
    color: #000;
    font-weight: 600;
    line-height: 120%;
}

.pa-variation-badge {
    white-space: normal;
    word-break: break-word;
    text-align: left;
    font-weight: 600;
}


/* ==========================================================================
   account
   ========================================================================== */

/*
 * Quote page and members area.
 *
 * .pa-page-header is the old quote template's title band (templates/quote.php drew it with inline
 * styles): a pale strip, the title centred and large. The history table is the account page's list
 * of quotes, drawn by quote.js.
 */

.pa-page-header {
    background: #f9f9f9;
}

/* Old body class "product-page" (base.css): the label column of the technical tables stays narrow. */
.pa-product-tabs .table-style-02 th {
    width: 1%;
    white-space: nowrap;
}

.pa-page-header-inner {
    padding: 32px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pa-page-header h1 {
    font-size: 40px;
    line-height: 1.1;
    color: #232323;
    text-align: center;
}

@media (max-width: 767px) {
    .pa-page-header h1 {
        font-size: 28px;
    }
}

.pa-quote-table {
    font-size: 14px;
}

.pa-quote-table th {
    font-weight: 500;
    color: #232323;
    border-bottom: 1px solid #e4e4e4;
    padding: 10px 8px;
}

.pa-quote-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: middle;
}

.pa-quote-table .pa-quote-lines td {
    background: #fafafa;
    font-size: 13px;
}

.pa-quote-table .pa-quote-lines ul {
    padding-left: 18px;
}