/* ==========================================================================
   Responsive layer — loaded after site.css.

   Scope: make the existing design work below 1000px. It deliberately does NOT
   restyle anything. The desktop rendering is left pixel-identical, so almost
   every rule here lives inside a media query.

   Two things are avoided on purpose:
     - no global `box-sizing: border-box`, because site.css sizes with
       content-box (e.g. `.sInput { width: 319px; padding: 7px 3px }`) and
       flipping it would shift the desktop layout;
     - no global `img { max-width: 100% }`, because the banner artwork is
       absolutely positioned and animated off-canvas by banner.js.
   ========================================================================== */


/* =============================== < 1024px =============================== */
/* The 1000px shell stops fitting. Containers go fluid, columns unstack.    */

@media (max-width: 1023px) {

    /* border-box only on these three: site.css uses content-box everywhere,
       and "width: 100%" plus side padding would otherwise overflow the
       viewport by exactly the padding (this was overflowing the footer). */
    .container,
    .content,
    footer .containerfot,
    footer .boxfooter {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Nothing may push the page sideways. */
    html,
    body {
        overflow-x: hidden;
    }

    /* Sidebar (315px) + main (635px) were floated side by side. */
    .boxLateral,
    .blockRight,
    .blockIndex {
        width: 100%;
        max-width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Main content first, category boxes after it. */
    .blockRight {
        margin-bottom: 24px;
    }

    .content {
        display: flex;
        flex-direction: column;
    }

    .content .blockRight,
    .content .blockIndex {
        order: 1;
    }

    .content .boxLateral {
        order: 2;
    }

    /* The four category boxes are 314px each; lay them out in a centred row
       while there is room, instead of one tall left-aligned column. */
    .boxLateral {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
    }

    .boxLateral .box {
        width: auto;
        max-width: 100%;
        margin: 0;
        text-align: center;
    }

    .boxLateral .box a {
        display: inline-block;
    }

    .boxLateral .box img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }

    .boxLateral br {
        display: none;
    }

    /* Content images should never push the page sideways. */
    .content img,
    .blockRight img,
    .blockIndex img,
    footer img {
        max-width: 100%;
        height: auto;
    }

    /* Wide tables scroll inside their own box. */
    .tableBusca,
    .tableInfo,
    .tableInfo1,
    .tablePed {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Order/contact form fields are fixed at 530/290/183/620px. */
    .inputPed,
    .inputPed1,
    .inputPed2,
    .formPedido textarea,
    .formPedido1 textarea,
    .formPedido input[type="text"],
    .formPedido1 input[type="text"] {
        width: 100%;
        max-width: 100%;
    }

    .formPedido table,
    .formPedido1 table {
        width: 100%;
    }
}


/* ================================ < 900px =============================== */
/* Header, navigation and the hero stop fitting on one desktop row.         */

@media (max-width: 899px) {

    /* 496px of background artwork with nothing in it once the header stacks.

       padding-top matters: the logo used to carry margin-top instead, and
       with no padding or border on .header/.container that margin collapsed
       straight out of the header, shifting the whole dark block down and
       leaving a white strip of body above it. */
    .header,
    .header1 {
        height: auto;
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 16px;
        margin-top: 0;
        margin-bottom: 24px;
        background-size: cover;
        background-position: center top;
    }

    .logo,
    .divRight,
    .language,
    .menuPrincipal {
        float: none;
    }

    /* No top margin here: it would collapse out of the header again. */
    .logo {
        width: auto;
        margin: 0;
    }

    .logo img {
        max-width: 180px;
        height: auto;
    }

    .divRight {
        margin: 12px 0 0;
        width: 100%;
    }

    /* bg_menu.png is 6x48 and repeat-x, so it only paints the first 48px.
       Once the bar wraps to a second row the rest went transparent. This is
       the same vertical gradient sampled out of that PNG. */
    .menuPrincipal {
        height: auto;
        margin: 10px 0 0;
        padding: 4px 0;
        background-image: linear-gradient(180deg, #2e3b46 0%, #232c33 50%, #1d2329 100%);
        background-repeat: repeat;
        background-size: auto;
    }

    /* Stack the bar vertically. Superfish is built for one desktop row, and a
       wrapped row plus absolute dropdowns is where the layout went strange. */
    .menuPrincipal ul.sf-menu {
        display: block;
        float: none;
        height: auto;
        width: 100%;
    }

    .menuPrincipal ul.sf-menu > li {
        float: none;
        display: block;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .menuPrincipal ul.sf-menu > li:first-child {
        border-top: 0;
    }

    /* superfish.css pins links to "height: 46px; line-height: 44px" for the
       desktop bar. Left alone, each stacked row is a 46px box with the label
       at the top and dead space underneath — the "double" rows. */
    .menuPrincipal ul.sf-menu a {
        white-space: normal;
        height: auto;
        line-height: 1.35;
        font-size: 15px;
        padding: 12px 14px;
        margin: 0;
        border-radius: 0;
    }

    /* .mLeft / .mRight round the ends of the horizontal bar, with !important. */
    .menuPrincipal ul.sf-menu a.mLeft,
    .menuPrincipal ul.sf-menu a.mRight {
        border-radius: 0 !important;
    }

    .menuPrincipal ul.sf-menu li {
        margin: 0;
    }

    /* Submenus: superfish parks them at "position: absolute; top: -999em"
       and reveals them by moving top to a hardcoded 2.5em, which assumes a
       single-row bar 2.5em tall. Made static so they open in the flow,
       indented under their parent, instead of floating over the next row. */
    /* superfish.css styles the panel as white with dark text (#FEFEFE /
       #191F24). Keep that — a dark background here left dark text on dark.
       Only the desktop geometry (220px wide, absolute, 10px margin) changes. */
    .menuPrincipal ul.sf-menu ul {
        position: static;
        top: auto;
        left: auto;
        display: none;
        width: auto;
        max-width: 100%;
        margin: 0 10px 8px;
        padding: 4px;
        background: #fefefe;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

    .menuPrincipal ul.sf-menu li:hover > ul,
    .menuPrincipal ul.sf-menu li.sfHover > ul {
        display: block;
        top: auto;
        left: auto;
    }

    .menuPrincipal ul.sf-menu ul li {
        width: auto;
        margin: 0;
        background: transparent;
        border-top: 0;
    }

    /* supersubs.js measures the desktop dropdown and writes the result as
       INLINE styles: an em width on the <ul> (supersubs.js:64), plus
       white-space:nowrap and a matching width on every <li> (:48, :66).
       Inline beats any stylesheet, so these need !important to be undone. */
    .menuPrincipal ul.sf-menu ul,
    .menuPrincipal ul.sf-menu ul li,
    .menuPrincipal ul.sf-menu ul li a {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        float: none !important;
    }

    /* Fixed 200px width, 30px height and a !important padding, all sized for
       the desktop dropdown. */
    .menuPrincipal ul.sf-menu ul li a {
        height: auto;
        margin: 0;
        padding: 9px 10px !important;
        font-size: 14px;
        line-height: 1.35;
        color: #191f24;
        border-bottom: 1px solid #e2e5e7;
    }

    .menuPrincipal ul.sf-menu ul li:last-child > a {
        border-bottom: 0;
    }

    .menuPrincipal ul.sf-menu ul li a:hover {
        color: #1f97d7;
        background: #f2f7fa;
    }

    /* Third level (Grãos / Cana-de-Açúcar) nests inside the white panel. */
    .menuPrincipal ul.sf-menu ul ul {
        margin: 0 0 6px 12px;
        background: #f1f3f4;
    }

    /* Superfish injects a "»" span into any link that has a submenu; on a
       stacked row it reads better pushed to the right edge. */
    .menuPrincipal ul.sf-menu a.sf-with-ul {
        position: relative;
        padding-right: 30px;
    }

    .menuPrincipal ul.sf-menu .sf-sub-indicator {
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: -0.7em;
        opacity: 0.65;
    }

    /* degrade.jpg is a grey-to-white strip anchored 470px down, sized for the
       496px desktop header. With the header collapsed it lands in the middle
       of the content as a stray grey band. */
    body {
        background-image: none;
        background-color: #fff;
    }

    /* Separator PNGs only make sense on a single unwrapped row. Needs to be
       at least as specific as ".menuPrincipal ul.sf-menu > li" above, which
       sets display:block on every item — otherwise that rule wins and the
       separators render as full-width rows of their own. */
    .menuPrincipal ul.sf-menu > li.separador,
    .menuPrincipal ul.sf-menu li.separador {
        display: none;
    }

    .language {
        width: auto;
        margin: 10px 0 0;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 4px;
    }

    .language li {
        float: none;
        margin: 0 4px;
    }

    /* banner.js animates hard-coded pixel offsets (top: 342px, right: -2000px)
       and window.width/2, so the hero cannot reflow. Hiding it beats shipping
       a clipped or overlapping one. */
    #box_banner {
        display: none;
    }

    /* Footer columns were three floats in a 1000px row. */
    footer .boxImage,
    footer .boxEnd,
    footer .chat,
    footer .textDeveloper,
    footer .linkTopo {
        float: none;
    }

    footer .boxEnd {
        border-left: 0;
        padding-left: 0;
        margin: 12px 20px 0 0;
    }

    footer .containerfot {
        height: auto;
        overflow: hidden;
    }

    /* Fixed 20px box around a taller image. */
    footer .linkTopo {
        height: auto;
        display: inline-block;
    }

    footer .linkTopo img,
    footer .boxImage img {
        max-width: 100%;
        height: auto;
    }

    footer .textDeveloper {
        margin-top: 12px;
    }
}


/* ================================ < 640px =============================== */
/* Phones. The search panel is a 604x107 PNG with the controls positioned    */
/* by hard margins inside it, so below this width it has to become a plain   */
/* stacked form.                                                             */

@media (max-width: 639px) {

    .boxSearch {
        width: 100%;
        max-width: 100%;
        height: auto;
        background-image: none;
        background-color: #f2f5f7;
        border: 1px solid #d9e0e5;
        padding: 12px;
        margin: 16px 0 8px;
        overflow: hidden;
    }

    .boxSearch > img {
        max-width: 100%;
        height: auto;
        margin-bottom: 8px;
    }

    .sZindex {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    /* These carried a 66px top margin to sit inside the background image. */
    .divInput,
    .divInput1,
    .select-marcas {
        float: none;
        width: 100%;
        margin: 0;
    }

    .divInput .sInput,
    .divInput1 select,
    .select-marcas select {
        float: none;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .btSearch {
        float: none;
        margin: 0;
    }

    /* Category boxes go one per row, centred at their natural 314px rather
       than stretched full width, which distorts the artwork. */
    .boxLateral {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .boxLateral .box {
        width: 100%;
        max-width: 314px;
        margin: 0;
        text-align: center;
    }

    .boxLateral .box img {
        width: 100%;
        max-width: 314px;
        margin: 0 auto;
    }

    /* Order form label/field pairs sit in table rows; stack them. */
    .formPedido table td,
    .formPedido1 table td {
        display: block;
        width: auto;
        text-align: left;
        padding: 3px 0;
    }

    .boxMenuAdd,
    .boxMenuAdd2 {
        width: 100%;
    }

    .boxMenuAdd ul li,
    .boxMenuAdd2 ul li {
        float: none;
        display: block;
    }

    .boxMenuAdd ul li a {
        width: auto;
        display: block;
    }

    .txtQuant {
        width: 60px;
    }

    /* Fancybox panels carry inline pixel sizes. */
    #telefone-fancy {
        width: auto !important;
        max-width: 100%;
    }
}


/* ============================ touch targets ============================= */

@media (hover: none) and (pointer: coarse) {
    .menuPrincipal ul.sf-menu > li > a,
    .language li a,
    .tags a {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}


/* ==========================================================================
   Contact / order controls

   Not responsive fixes: two concrete defects on the contact form.
   ========================================================================== */

/* 1. The loaders must start hidden. site.css does set display:none, but at a
   single class of specificity, so anything later could win. These selectors
   are more specific and load after it. jQuery .show() writes an inline style,
   which still beats this, so the animation works normally on submit. */
.formPedido1 .loader_contato,
.formPedido .loader-pedido,
.boxPedidos .loader-search,
img.loader_contato,
img.loader-pedido,
img.loader-search {
    display: none;
}

/* 2. The submit is an empty <input> painted with a background image, and
   jqTransform replaces it with <button><span>value</span></button>. With an
   empty value that renders a blank button, and the 87x37 enviar_us.png sits
   in a 105x37 box. Give it a real label instead of baked-in artwork. */
.btContato,
.btContatous,
.btContatoes,
button.btContato,
.btContato.jqTransformButton {
    background-image: none;
    background-color: #1f97d7;
    width: auto;
    min-width: 105px;
    height: 37px;
    padding: 0 18px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-family: arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 37px;
    cursor: pointer;
}

.btContato span,
.btContatous span,
.btContatoes span {
    color: #fff;
    line-height: 37px;
}

.btContato:hover,
.btContatous:hover,
.btContatoes:hover {
    background-color: #1a83bd;
}


/* ==========================================================================
   Inquiry list  (/detalhes/pedido/)

   The action row used floated <li>s with no clearfix, so .control collapsed
   to zero height and whatever followed rode up over it. Flex removes the
   float entirely and keeps the same left-to-right order.
   ========================================================================== */

.control {
    margin: 14px 0 0;
    clear: both;
}

.control ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.control ul li {
    float: none;
    list-style: none;
    margin: 0;
}

.control ul li a,
.control ul li img {
    display: block;
}

.addItem {
    margin: 0;
}

/* Items table ------------------------------------------------------------ */

.tablePed {
    border-collapse: collapse;
}

.tablePed thead tr th {
    padding: 8px 6px;
    text-align: left;
}

.tablePed tbody tr td {
    vertical-align: middle;
}

/* Quantity box and its refresh icon share a cell; the float split them. */
.tablePed td .txtQuant {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px 0 0;
}

.tablePed td .refresh,
.tablePed td .remove-item {
    display: inline-block;
    vertical-align: middle;
}

.tablePed td .refresh img,
.tablePed td .remove-item img {
    display: inline-block;
    vertical-align: middle;
}

/* The description column carries long OEM code lists. */
.tablePed td:nth-child(2) {
    word-break: break-word;
}

/* Category picker that slides down from "add item" -------------------------- */

.boxMenuAdd ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.boxMenuAdd ul li {
    float: none;
    list-style: none;
}

.boxMenuAdd ul li a {
    margin: 0;
}

@media (max-width: 639px) {
    .control ul {
        gap: 10px 12px;
    }

    /* Fixed 135x165 tiles. */
    .boxMenuAdd ul li a {
        width: auto;
        height: auto;
        overflow: visible;
    }

    .boxMenuAdd ul li a img {
        max-width: 100%;
        height: auto;
    }

    .tablePed thead tr th,
    .tablePed tbody tr td {
        padding: 6px 4px;
        font-size: 12px;
    }

    .tablePed td .txtQuant {
        width: 44px;
        padding: 4px;
    }
}

/* Empty-state row. */
.tablePed .lista-vazia td {
    padding: 18px 10px;
    color: #777;
    font-style: italic;
    text-align: center;
    border: 1px #ccc solid;
}


/* ==========================================================================
   Home page

   cycle.css lays the three product carousels out as 330px floats (990px in
   total) inside a fixed-height .boxTotal, and jQuery Cycle then writes inline
   width/height onto the container and slides — hence the !important below.
   ========================================================================== */

@media (max-width: 1023px) {

    /* Fixed 350px with three floats inside. */
    .boxTotal {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    #wrap_carousel2 {
        float: none;
        width: 330px;
        max-width: 100%;
        margin: 0;
    }

    /* The intro card image is floated right with an inline 35px padding,
       which leaves a sliver of text beside it once the column narrows. */
    .blockIndex .text img,
    .blockIndex .text > img {
        float: none !important;
        display: block;
        margin: 0 auto 16px;
        padding: 0 !important;
        max-width: 100%;
        height: auto;
    }

    /* Justified text builds rivers in a narrow column. */
    .text {
        text-align: left;
    }
}

@media (max-width: 639px) {

    /* Carousel is 330px wide with a 305px card; both overflow a small phone. */
    #wrap_carousel2,
    #carouselTotal,
    #carouselTotal ul {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    #carouselTotal ul li {
        float: none;
        width: auto !important;
        max-width: 305px;
        margin: 0 auto;
    }

    /* Four 122px thumbnails in a 2x2 grid; centre them when they reflow. */
    #carouselTotal ul li a {
        margin: 5px auto;
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    #carouselTotal ul li {
        text-align: center;
    }

    /* Fixed 280px title bars. */
    .subTitle,
    .subTitle2,
    .subTitle3 {
        width: auto;
        max-width: 100%;
        font-size: 20px;
    }

    /* The intro copy carries hard <br /> breaks positioned for a 1000px
       column; they wrap badly on a phone. */
    .blockIndex .text br {
        display: none;
    }

    .boxProducts {
        height: auto;
    }
}


/* ==========================================================================
   Remaining fixed-size blocks

   Closes the last rules in site.css / cycle.css that carry desktop pixel
   sizes. (#carousel, #carousel1, #carousel2 and #wrap_carousel are all inside
   {% comment %} in home.html and never render, so they are left alone.)
   ========================================================================== */

@media (max-width: 1023px) {

    /* The banner still shows between 900 and 1023px, and its inner block is
       a hard 1000px — wider than the viewport. */
    #box_banner ul li .textos {
        width: 100%;
        max-width: 1000px;
    }

    /* 314x123 background images in the sidebar. Without a fluid height the
       box keeps 123px of empty space once the artwork scales down. */
    [class^="boxCartao"] {
        width: 100%;
        max-width: 314px;
        height: 0;
        padding-bottom: 39.2%;      /* 123 / 314 */
        margin-left: auto;
        margin-right: auto;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Fixed 40px around a 20px link that wraps to two lines on narrow
       screens, pushing its text outside the box. */
    .boxInformacoes {
        height: auto;
        min-height: 40px;
        overflow: hidden;
    }

    .boxInformacoes a {
        display: inline-block;
        line-height: 1.3;
    }

    /* Product sheet tables. */
    .tableInfo,
    .tableInfo1 {
        max-width: 100%;
    }

    .tableInfo tbody tr td {
        padding: 10px;
    }
}

@media (max-width: 639px) {

    .tableInfo tbody tr td {
        padding: 8px 6px;
    }

    .tableInfo1 tbody tr td {
        padding: 4px 8px 4px 0;
    }

    /* Quick-look fragment shown inside fancybox. */
    .fancybox-inner .tableInfo,
    .fancybox-inner .tableInfo1 {
        width: 100% !important;
    }

    /* 404 page carries an inline font-size: 40px. */
    .blockRight h1[style],
    .blockIndex h1[style] {
        font-size: 26px !important;
    }

    /* Long headings on the product sheet. */
    h1.title {
        font-size: 22px;
        line-height: 1.25;
        word-break: break-word;
    }

    /* Content pages set 18px inline on <font>/<b> lead-ins. */
    .text font[style],
    .text b[style] {
        font-size: 16px !important;
    }
}