/* ==========================================================================
   Expansão BR — application stylesheet

   Hand-converted from the Next.js styled-components in
   expansao_node/next/src/styles/. Each styled component became a semantic
   class: HeaderContainer -> .header-bar, AboutCard -> .about-card, etc.

   Source map (styled-components file -> section here):
     theme.ts + global.ts      -> Tokens, Reset
     pages/Home.ts             -> Header, Nav, Slideshow, Home sections
     components/Footer         -> Footer
     components/SearchProducts -> Live search dropdown
     components/CardProduct    -> Product cards
     pages/Products.ts         -> Product listing
     pages/Product.ts          -> Product detail
     pages/Cart.ts             -> Cart
     pages/Budget.ts           -> Inquiry
     pages/Contact.ts          -> Contact
     pages/AboutUs.ts          -> About
     pages/Represented.ts      -> Represented
     pages/Category.ts         -> Category landing pages
     pages/404.ts              -> Error pages
   ========================================================================== */


/* ---------------------------------------------------------------- tokens -- */
/* from theme.ts */

:root {
    --background: #f5f5f5;
    --text: #39598f;
    --background-dark: #064282;
    --background-search: #6f6c6c;
    --font: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-condensed: "Roboto Condensed", "Roboto", Arial, sans-serif;

    /* recurring literals from the styled-components */
    --white: #ffffff;
    --black: #000000;
    --grey-100: #f3f2f2;
    --grey-200: #e2e2e2;
    --grey-300: #d9d9d9;
    --grey-400: #a89e9e;
    --grey-500: #736d6d;
    --grey-600: #494949;
    --panel: #f2f2f2;
    --accent: #ffdf00;
    --danger: #d32f2f;

    --shadow-card: 3px 3px 10px rgba(0, 0, 0, 0.25);
    --shadow-bar: 0 4px 4px rgba(0, 0, 0, 0.25);

    --shell: 1280px;
}


/* ----------------------------------------------------------------- reset -- */
/* from global.ts */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--background);
    color: var(--text);
    font: 400 16px var(--font);
    line-height: 1.5;
    overflow-x: hidden;
}

button,
input,
optgroup,
select,
textarea {
    font: 500 16px var(--font);
    font-size: 100%;
    margin: 0;
    border: none;
    box-shadow: none;
    resize: none;
    outline: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* The img reset above (display:block) otherwise overrides the browser's
   [hidden] rule, which is why the form loader showed permanently. */
[hidden] {
    display: none !important;
}

ul,
ol {
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--background-dark);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------- header -- */
/* Home.ts: InitialBar, HeaderContainer, LogoContainer, SearchBar, NavActions */

.initial-bar {
    height: 40px;
    background-color: var(--background-dark);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 5px 12px;
    gap: 1rem;
}

.social-icon {
    height: 20px;
    width: 20px;
}

.social-icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.header-bar {
    height: 120px;
    width: 100%;
    background-color: var(--background);
    color: var(--text);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1rem;
}

.logo-container {
    height: 100%;
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

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

.logo-container:hover {
    cursor: pointer;
}

.search-bar {
    width: 50%;
    height: 44px;
    background: rgba(226, 226, 226, 0.55);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.search-input {
    width: 100%;
    margin: 0 1rem;
    font-weight: 400;
    font-size: 18px;
    color: #6b6363;
    background-color: transparent;
    box-shadow: none;
}

.search-input::placeholder {
    color: var(--grey-400);
}

.search-action {
    height: 44px;
    width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-dark);
    flex: 0 0 auto;
    cursor: pointer;
}

.search-action img {
    height: 18px;
    width: 18px;
    object-fit: contain;
}

.nav-actions {
    width: 20%;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    text-align: center;
}

.cart-wrapper {
    position: relative;
    display: inline-block;
}

.cart-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cart-icon {
    width: 32px;
    height: 32px;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    background-color: red;
    color: var(--white);
    font-size: 10px;
    line-height: 1;
}

.locales-wrapper {
    display: flex;
    gap: 2rem;
    white-space: nowrap;
}

.locales-wrapper a:hover {
    text-decoration: underline;
}


/* ------------------------------------------------------------------- nav -- */
/* Home.ts: CategoryBar, CategoryItems, CategoryItem */

.category-bar {
    width: 100%;
    min-height: 45px;
    background: var(--background-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    padding: 0 10%;
}

.category-items {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0.5rem;
}

.category-item {
    font-weight: 400;
    font-size: 18px;
    padding: 0.6rem 0.25rem;
    cursor: pointer;
    white-space: nowrap;
}

.category-item:hover {
    text-decoration: underline;
}

/* Mobile menu toggle: not in the Next app, which relied on a hover menu. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    background: var(--background-dark);
    color: var(--white);
    font-size: 0.95rem;
    cursor: pointer;
}


/* ------------------------------------------------------------- slideshow -- */
/* Home.ts: SlideshowContainer, SliderDots, SliderDot, EachSlideEffect */

.slideshow {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.slide {
    display: none;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px;
}

.slide.is-active {
    display: flex;
}

.slider-dots {
    display: flex;
    position: absolute;
    bottom: 1.5em;
    left: 5%;
    z-index: 10;
}

.slider-dot {
    display: block;
    margin: 0 0.5em;
    width: 1em;
    height: 1em;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    transition: 0.2s ease;
    cursor: pointer;
}

.slider-dot.is-active {
    background: rgba(255, 255, 255, 0.5);
}


/* --------------------------------------------------------- search filter -- */
/* Home.ts: SearchContainer, TabsSearch, TabSearch, BottomSearch, SelectSearch */

.search-filter {
    min-height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 50;
    margin-top: 1rem;
    background-color: var(--white);
}

.search-tabs {
    min-height: 50px;
    width: 75%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.search-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 1%;
    border: none;
    padding: 0 2rem;
    color: var(--white);
    font-weight: 800;
    background-color: var(--background-search);
    transition: all 0.2s ease-out;
    cursor: pointer;
}

.search-tab:hover,
.search-tab.is-active {
    padding-bottom: 8px;
}

/* Tab colours mirror the four product lines. */
.search-tab--pesada { background-color: #064282; }
.search-tab--graos { background-color: #2e7d32; }
.search-tab--cana { background-color: #558b2f; }
.search-tab--amarela { background-color: #dbb144; }

.search-bottom {
    min-height: 100px;
    width: 75%;
    background-color: var(--background-search);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.select-search {
    background-color: var(--grey-100);
    border: 0;
    outline: 0;
    padding: 0 1em 0 0.5rem;
    height: 35px;
    margin: 0 24px;
    width: 75%;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

.button-search {
    height: 40px;
    background: var(--background-dark);
    color: var(--white);
    padding: 0 2rem;
    margin-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* ---------------------------------------------------------- about (home) -- */
/* Home.ts: AboutSection, AboutParagraph, KnowMoreButton, AboutCards, AboutCard */

.about-section {
    min-height: 650px;
    width: 100%;
    background-color: var(--panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem;
}

.about-section h3 {
    font-size: 3rem;
    color: var(--black);
    font-weight: 400;
    font-family: var(--font-condensed);
    text-align: center;
}

.about-paragraph {
    font-size: 23px;
    color: var(--grey-600);
    font-weight: 400;
    text-align: center;
    width: 80%;
    margin-top: 1rem;
}

.know-more-button {
    background-color: var(--background-dark);
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    padding: 12px 4rem;
    margin-top: 2rem;
    display: inline-block;
}

.about-cards {
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

.about-card {
    position: relative;
    min-height: 250px;
    width: calc(90% / 5);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: var(--shadow-card);
    text-align: center;
    gap: 2rem;
    padding: 1rem;
}

.about-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}


/* --------------------------------------------------------------- quality -- */
/* Home.ts: QualityContainer, FixedMessage, DynamicMessage */

.quality-section {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 40;
    background: var(--background-dark);
    overflow: hidden;
}

.quality-fixed {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 3rem;
    line-height: 3.5rem;
    color: var(--white);
}

.quality-dynamic {
    overflow: hidden;
    border-radius: 8px;
    height: 150px;
    font-size: 4rem;
    margin-left: 1.5rem;
}

.quality-dynamic span {
    display: flex;
    height: 100%;
    padding-left: 10px;
    animation: spin_words 10s infinite;
}

.quality-dynamic h4 {
    color: var(--accent);
    margin-right: 0.8rem;
    font-size: 4rem;
}

.quality-dynamic h5 {
    color: var(--white);
    font-size: 4rem;
}

@keyframes spin_words {
    0%   { transform: translateY(20%); }
    35%  { transform: translateY(-80%); }
    70%  { transform: translateY(-180%); }
    100% { transform: translateY(-280%); }
}


/* ----------------------------------------------------------- represented -- */
/* Home.ts: RepresentedContainer, CarouselSlider, CarouselSlide, PartnerLogo */

.represented-section {
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    position: relative;
    z-index: 30;
    color: var(--black);
    padding-bottom: 1rem;
}

.represented-section p {
    font-size: 3rem;
    margin-top: 2rem;
    font-family: var(--font-condensed);
    font-weight: 400;
    text-align: center;
}

.carousel-slider {
    width: 100%;
    height: 100px;
    position: relative;
    display: flex;
    overflow: hidden;
}

.carousel-slide {
    height: 100px;
    display: flex;
    align-items: center;
    gap: 4rem;
    animation: slideshow 20s linear infinite;
    flex: 0 0 auto;
}

.carousel-slide img {
    height: 70px;
    width: auto;
    padding: 0 30px;
}

@keyframes slideshow {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.partner-logo {
    width: 200px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 0 0 auto;
}


/* --------------------------------------------------- contact block (home) -- */
/* Home.ts: ContactSection, MapContainer, ContactForm, ContactInput, ContactButton */

.contact-section {
    width: 100%;
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 30;
    background-color: var(--panel);
    flex-wrap: wrap;
}

.map-container {
    position: relative;
    width: 40%;
    min-height: 490px;
}

.map-container img,
.map-container iframe {
    width: 100%;
    height: 100%;
    min-height: 490px;
    object-fit: cover;
    border: 0;
}

.contact-form {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 3rem;
    justify-content: center;
}

.contact-form h3 {
    font-size: 3rem;
    margin: 0;
    font-family: var(--font-condensed);
    font-weight: 400;
    color: #040404;
}

.contact-form p {
    font-family: var(--font);
    font-weight: 400;
    font-size: 25px;
    color: var(--grey-500);
}

.contact-input {
    height: 40px;
    background: var(--grey-300);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    color: #333;
    width: 100%;
}

.contact-input::placeholder {
    color: #6f6f6f;
}

.contact-button {
    width: 150px;
    height: 40px;
    background: var(--background-dark);
    font-family: var(--font);
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    color: var(--white);
    cursor: pointer;
}


/* ---------------------------------------------------------------- footer -- */
/* components/Footer/Footer.ts */

.site-footer {
    min-height: 350px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #141414;
    color: var(--white);
    padding: 2rem 5rem;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-menus {
    width: 40%;
    display: flex;
    margin-top: 1rem;
    gap: 5rem;
}

.footer-menu {
    display: flex;
    flex-direction: column;
}

.footer-menu h3 {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 12px;
}

.footer-menu li {
    font-weight: 400;
    margin-top: 6px;
}

.footer-menu li:hover {
    cursor: pointer;
    text-decoration: underline;
}

.footer-infos {
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 1rem;
}

.footer-infos ul {
    width: 75%;
    color: var(--white);
    margin-top: 2rem;
}

.footer-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.footer-info p {
    margin-left: 1rem;
}

.footer-info .info-icon {
    height: 30px;
    width: 30px;
    flex: 0 0 auto;
}

/* phone / map / email are dark monochrome SVGs; on the dark footer they were
   invisible. brightness(0) invert(1) recolours them white. */
.footer-info .info-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.social-media {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.social-media h3 {
    margin: 0 0 12px;
}

.social-media-icons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.social-media-icons a {
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.bottom-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ededed;
    background-color: #141414;
    padding: 12px 24px;
}

.bottom-bar hr {
    width: 95%;
    height: 1px;
    background-color: #ededed;
    border: 0;
    margin-bottom: 18px;
}

.bottom-bar h3 {
    font-size: 18px;
    font-weight: 400;
    margin-left: 12px;
}

.bottom-bar h5 {
    font-size: 15px;
    font-weight: 400;
}


/* ------------------------------------------------------------ page shell -- */
/* Cart.ts, Budget.ts, Contact.ts, AboutUs.ts all repeat this block; it is
   consolidated here instead of being duplicated four times. */

.page-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    padding-bottom: 3rem;
}

.page-body h1 {
    font-family: var(--font-condensed);
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.3;
    text-transform: uppercase;
    color: #141414;
}

.page-body p {
    font-size: 1rem;
    line-height: 1.8rem;
    color: #252627;
    margin-top: 1.5rem;
}

.page-section {
    width: 90%;
    max-width: var(--shell);
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.page-section--column {
    flex-direction: column;
    align-items: flex-start;
}

/* Title with the animated underline used across those pages. */
.page-title {
    width: 100%;
    height: auto;
    position: relative;
}

.page-title::after {
    content: "";
    position: absolute;
    background-color: #a8a8a8;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: -5px;
    transition: 0.3s;
}


/* ------------------------------------------------------- product listing -- */
/* pages/Products.ts */

.products-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
}

.products-container {
    width: 70%;
    max-width: var(--shell);
}

.products-container h1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.6;
}


/* ------------------------------------------------- search filter sidebar -- */

.products-layout {
    width: 92%;
    max-width: var(--shell);
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.products-main {
    min-width: 0;
}

.products-main h1 {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.filter-sidebar {
    position: sticky;
    top: 1rem;
}

/* Shown only on mobile to collapse the filters. */
.filter-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.7rem 1rem;
    background: var(--background-dark);
    color: var(--white);
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

/* One bordered panel; the groups are sections inside it, not separate cards. */
.filter-panel {
    background: var(--white);
    border: 1px solid var(--grey-200);
}

.filter-group + .filter-group {
    border-top: 1px solid var(--grey-200);
}

.filter-heading {
    margin: 0;
    padding: 0.7rem 1rem;
    background: var(--grey-100);
    color: var(--background-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--grey-200);
}

.filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The manufacturer list can be long; cap it and let it scroll. */
.filter-list--brands {
    max-height: 360px;
    overflow-y: auto;
}

.filter-link {
    display: block;
    padding: 0.55rem 1rem;
    color: var(--text);
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--grey-100);
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}

.filter-link:hover {
    background: var(--grey-100);
    text-decoration: none;
}

.filter-link.is-active {
    background: #eaf2fb;
    border-left-color: var(--background-dark);
    color: var(--background-dark);
    font-weight: 700;
}

/* Line links read as pills. */
.filter-list--lines .filter-link {
    font-weight: 500;
}

/* Search box above the results. */
.products-search {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    max-width: 560px;
}

.products-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 1rem;
    background: var(--grey-100);
    border: 1px solid var(--grey-300);
    border-right: 0;
}

.products-search .button-search {
    height: 44px;
    flex: 0 0 auto;
}

.products-empty {
    padding: 2rem 0;
    color: var(--grey-500);
}

.products-grid {
    width: 100%;
    margin-top: 1rem;
    display: grid;
    justify-content: center;
    /* minmax(0, 1fr) not 1fr: plain 1fr floors at content width, so a product
       with a long unbreakable OEM string blows its column past half and widens
       the whole card. minmax(0,...) lets the track shrink and the text wrap. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 2rem;
}

/* components/CardProduct/Card_Product.ts */
.card-product {
    width: 100%;
    min-width: 0; /* allow the card to shrink inside its grid track */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    background: var(--white);
    cursor: pointer;
}

.card-product-image {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.card-product-infos {
    width: 85%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #1b417e;
    padding-top: 24px;
}

.card-product-title {
    font-weight: 500;
    font-size: 23px;
    line-height: 29px;
}

.card-product-description {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #353535;
    max-width: 100%;
    /* Long hyphen-joined OEM strings must wrap instead of forcing card width. */
    overflow-wrap: anywhere;
}

.card-product-title {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.button-product {
    margin-top: 12px;
    background-color: #1b417e;
    padding: 8px 2rem;
    color: var(--white);
    font-weight: 700;
    transition: all 0.35s ease-in-out;
    cursor: pointer;
    display: inline-block;
}

.button-products {
    margin-top: 12px;
    background-color: var(--text);
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    height: 35px;
    padding: 0 2rem;
    color: var(--white);
    font-weight: 700;
    transition: all 0.35s ease-in-out;
    cursor: pointer;
}

.button-products:hover {
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
}

/* Category sidebar on the listing page. */
.category-list {
    color: #353535;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-list h3 {
    font-size: 26px;
    font-weight: 700;
}

.category-list details summary {
    list-style: none;
    cursor: pointer;
}

.category-list details summary::-webkit-details-marker,
.category-list details summary::marker {
    display: none;
}

.category-list-items {
    display: flex;
    flex-direction: column;
    margin-left: 2rem;
    margin-top: 12px;
}

.category-list-item {
    margin-top: 6px;
    color: #353535;
}


/* -------------------------------------------------------- product detail -- */
/* pages/Product.ts */

.product-container {
    width: 100%;
    max-width: var(--shell);
    display: flex;
    margin: 3rem auto;
    justify-content: center;
    align-items: flex-start;
    gap: 2%;
    font-family: var(--font);
    flex-wrap: wrap;
    padding: 0 1rem;
}

.product-image {
    width: 30%;
    min-height: 320px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
}

.product-infos {
    width: 34%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-label {
    font-weight: 500;
    font-size: 18px;
    color: #1b417e;
    margin-top: 1rem;
}

.product-title {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #141414;
}

.product-description {
    font-weight: 400;
    font-size: 18px;
    color: var(--black);
    margin-top: 4px;
}

.product-brand {
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--text);
    margin-top: 1rem;
}

.product-actions {
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
}

.quantity-container {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 55px;
    border: 2px solid #2380b9;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quantity-container input {
    width: 60px;
    text-align: center;
    background: transparent;
    font-size: 1.2rem;
}

.button-quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0 1.5rem;
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}


/* -------------------------------------------------------------- oem list -- */

.oem-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.oem-tag {
    background: var(--grey-100);
    border: 1px solid var(--grey-300);
    padding: 4px 10px;
    font-size: 0.9rem;
    color: #353535;
}


/* ------------------------------------------------------------------ cart -- */
/* pages/Cart.ts */

.cart-box {
    width: 100%;
    border: 1px solid var(--grey-300);
    margin: 1rem 0 2rem;
    background: var(--white);
}

.cart-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--grey-300);
}

.cart-row:last-child {
    border-bottom: 0;
}

.cart-row-image {
    width: 90px;
    flex: 0 0 auto;
}

.cart-row-info {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-row-info h3 {
    font-size: 1.05rem;
    font-weight: 500;
    color: #1b417e;
}

.cart-row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.cart-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--grey-500);
}

.cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}


/* --------------------------------------------------------------- inquiry -- */
/* pages/Budget.ts */

.budget-form {
    width: 100%;
    margin: 1rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.budget-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.budget-input {
    height: 44px;
    width: 100%;
    background: var(--grey-100);
    border: 1px solid var(--grey-300);
    padding: 0 1rem;
    color: #252627;
}

.budget-input:focus {
    border-color: var(--background-dark);
}

textarea.budget-input {
    height: 130px;
    padding: 0.75rem 1rem;
    resize: vertical;
}

.budget-submit {
    align-self: flex-start;
    background: var(--background-dark);
    color: var(--white);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 12px 3rem;
    cursor: pointer;
}


/* --------------------------------------------------------------- contact -- */
/* pages/Contact.ts */

.contact-columns {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    flex-wrap: wrap;
}

.contact-column {
    flex: 1 1 320px;
    min-width: 0;
}


/* ----------------------------------------------------------------- about -- */
/* pages/AboutUs.ts */

.team-picture {
    width: 400px;
    max-width: 100%;
    height: 280px;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 10px;
}

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

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    width: 100%;
    margin-top: 1rem;
}

.value-card {
    background: var(--white);
    box-shadow: var(--shadow-card);
    padding: 2rem 1.5rem;
    text-align: center;
}

.value-card img {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    object-fit: contain;
}


/* ----------------------------------------------------- represented cards -- */
/* pages/Represented.ts */

.represented-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    width: 100%;
}

.represented-card {
    background: var(--white);
    box-shadow: var(--shadow-card);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.represented-card img {
    height: 70px;
    width: auto;
    object-fit: contain;
}


/* ------------------------------------------------- category landing page -- */
/* No Next equivalent: built here in the same visual language so the four
   category URLs (linha-pesada, etc.) keep their content. */

.category-hero {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding: 3rem 1rem;
    background: linear-gradient(rgba(6, 66, 130, 0.82), rgba(6, 66, 130, 0.82)) center / cover;
}

.category-hero h1 {
    font-family: var(--font-condensed);
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.2;
}

.category-hero p {
    font-size: 1.15rem;
    max-width: 70ch;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

.category-hero .know-more-button {
    margin-top: 1.5rem;
    background: var(--white);
    color: var(--background-dark);
}

.category-content {
    width: 90%;
    max-width: var(--shell);
    margin: 2.5rem auto;
}

.category-content h2 {
    font-family: var(--font-condensed);
    font-size: 2rem;
    font-weight: 400;
    color: #141414;
    margin-bottom: 0.75rem;
}

.category-content p {
    color: #252627;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.category-content ul {
    margin: 0 0 1.5rem 1.25rem;
}

.category-content li {
    list-style: disc;
    margin-bottom: 0.4rem;
    color: #252627;
}


/* ------------------------------------------------------------ error page -- */
/* pages/404.ts */

.error-page {
    width: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
    gap: 1rem;
}

.error-page h1 {
    font-family: var(--font-condensed);
    font-size: 5rem;
    font-weight: 700;
    color: var(--background-dark);
    line-height: 1;
}

.error-page p {
    font-size: 1.2rem;
    color: var(--grey-500);
}


/* --------------------------------------------------- live search results -- */
/* components/SearchProducts */

.search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 80;
    background: var(--white);
    box-shadow: var(--shadow-bar);
    max-height: 60vh;
    overflow-y: auto;
}

.search-results-inner {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.search-result-card {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--grey-200);
}

.search-result-card:hover {
    background: var(--grey-100);
}

.search-result-card img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: 0 0 auto;
}


/* ----------------------------------------------------------- pagination --- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.pagination a,
.pagination span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    background: var(--white);
    border: 1px solid var(--grey-300);
    color: var(--text);
}

.pagination a:hover {
    background: var(--background-dark);
    border-color: var(--background-dark);
    color: var(--white);
}

.pagination .current {
    background: var(--background-dark);
    border-color: var(--background-dark);
    color: var(--white);
    font-weight: 700;
}


/* ==========================================================================
   Responsive

   The Next app ships only three media queries (Home.ts 768px,
   Represented.ts 1200/768px) and otherwise relies on percentage widths, so
   this layer is written here rather than converted.
   ========================================================================== */

@media (max-width: 1200px) {

    .products-container {
        width: 85%;
    }

    .about-card {
        width: calc(90% / 3);
    }

    .category-bar {
        padding: 0 4%;
    }
}


@media (max-width: 900px) {

    /* Filter sidebar stacks above the results and collapses behind a toggle. */
    .products-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filter-sidebar {
        position: static;
    }

    .filter-toggle {
        display: flex;
    }

    .js .filter-panel {
        display: none;
    }

    .js .filter-sidebar.is-open .filter-panel {
        display: block;
    }

    .filter-list--brands {
        max-height: 300px;
    }
}


@media (max-width: 1024px) {

    .header-bar {
        height: auto;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 1rem;
    }

    .logo-container {
        width: auto;
        height: auto;
    }

    .search-bar {
        order: 3;
        width: 100%;
    }

    .nav-actions {
        width: auto;
        gap: 1.25rem;
    }

    .product-container {
        gap: 2rem;
    }

    .product-image,
    .product-infos,
    .product-actions {
        width: 100%;
    }

    .product-actions {
        justify-content: flex-start;
    }

    .contact-form h3,
    .about-section h3,
    .represented-section p {
        font-size: 2.2rem;
    }

    .quality-fixed,
    .quality-dynamic,
    .quality-dynamic h4,
    .quality-dynamic h5 {
        font-size: 2.2rem;
        line-height: 2.6rem;
    }

    .quality-dynamic,
    .quality-section {
        height: auto;
        min-height: 110px;
    }
}


@media (max-width: 900px) {

    /* Nav collapses behind a toggle; the Next app simply hid the menu. */
    .nav-toggle {
        display: inline-flex;
    }

    .category-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    .js .category-items {
        display: none;
    }

    .js .category-bar.is-open .category-items {
        display: flex;
    }

    .category-items {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .category-item {
        padding: 0.9rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        font-size: 1rem;
    }

    .slide {
        height: 320px;
    }

    .search-tabs,
    .search-bottom {
        width: 92%;
    }

    .search-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .select-search {
        width: auto;
        margin: 0 16px;
    }

    .button-search {
        margin: 0 16px;
        justify-content: center;
    }

    .about-card {
        width: calc(90% / 2);
        min-height: 200px;
        gap: 1rem;
    }

    .contact-section {
        flex-direction: column;
    }

    .map-container,
    .contact-form {
        width: 100%;
    }

    .map-container,
    .map-container img,
    .map-container iframe {
        min-height: 300px;
    }

    .contact-form {
        padding: 2rem 1.25rem;
    }

    .site-footer {
        flex-direction: column;
        padding: 2rem 1.5rem;
    }

    .footer-menus,
    .footer-infos {
        width: 100%;
        gap: 2.5rem;
    }

    .footer-infos {
        align-items: flex-start;
    }

    .footer-infos ul,
    .social-media {
        width: 100%;
    }

    .products-container {
        width: 92%;
    }

    .budget-fields {
        grid-template-columns: 1fr;
    }

    .contact-columns {
        gap: 2rem;
    }
}


@media (max-width: 640px) {

    .page-body h1,
    .category-hero h1 {
        font-size: 2rem;
        line-height: 1.25;
    }

    .initial-bar {
        justify-content: center;
        flex-direction: row;
    }

    .locales-wrapper {
        gap: 1rem;
        font-size: 0.9rem;
    }

    .slide {
        height: 220px;
    }

    .slider-dots {
        bottom: 0.75em;
    }

    .about-section,
    .represented-section {
        min-height: 0;
    }

    .about-section h3,
    .contact-form h3,
    .represented-section p {
        font-size: 1.8rem;
    }

    .about-paragraph {
        width: 100%;
        font-size: 1.05rem;
    }

    .about-cards {
        margin-top: 1.5rem;
    }

    .about-card {
        width: 100%;
    }

    .know-more-button {
        padding: 12px 2rem;
        font-size: 1rem;
    }

    .quality-section {
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
    }

    .quality-fixed,
    .quality-dynamic,
    .quality-dynamic h4,
    .quality-dynamic h5 {
        font-size: 1.5rem;
        line-height: 1.9rem;
    }

    .quality-fixed {
        align-items: center;
        text-align: center;
    }

    .quality-dynamic {
        margin-left: 0;
        height: 1.9rem;
    }

    .carousel-slide img,
    .partner-logo {
        height: 50px;
    }

    .partner-logo {
        width: 130px;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-title {
        font-size: 1.75rem;
    }

    .page-section {
        width: 94%;
        gap: 1rem;
    }

    .cart-row {
        flex-wrap: wrap;
    }

    .cart-row-info {
        flex-basis: 100%;
        order: 3;
    }

    .site-footer {
        padding: 1.5rem 1rem;
    }

    .footer-menus {
        flex-direction: column;
        gap: 1.5rem;
    }


    .search-results-inner {
        grid-template-columns: 1fr;
    }
}


/* -------------------------------------------------------- legacy copy -- */
/* Body text carried over verbatim from the previous templates so the
   existing EN/ES translations keep matching. It contains <br>, <font> and
   <b> tags inside {% blocktrans %}, which cannot be cleaned without
   invalidating those msgids. */

.legacy-copy {
    color: #252627;
    line-height: 1.8;
    font-size: 1rem;
}

.legacy-copy font,
.legacy-copy b {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-condensed);
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    font-family: inherit;
    color: #141414;
}

.legacy-copy b {
    font-size: 1rem !important;
    margin-top: 0;
    color: var(--text);
}

.legacy-copy a {
    color: var(--background-dark);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.legacy-copy ul.ulBorder {
    margin: 1rem 0;
    padding: 0;
}

.legacy-copy ul.ulBorder li {
    list-style: none;
    margin-bottom: 0.5rem;
}

/* Message box on the home contact form (the other inputs are 40px tall). */
.contact-textarea {
    height: auto;
    min-height: 96px;
    padding: 0.75rem 1rem;
    align-items: flex-start;
    resize: vertical;
    line-height: 1.5;
}

/* Modern submit spinner, replacing the old loader.gif. Shown by app.js while
   an AJAX form is in flight (it toggles the [hidden] attribute). */
.form-loader {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(6, 66, 130, 0.25);
    border-top-color: var(--background-dark);
    border-radius: 50%;
    animation: form-spin 0.7s linear infinite;
    margin-top: 0.5rem;
}

/* On the dark home contact button row it needs light contrast. */
.contact-form .form-loader {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

@keyframes form-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .form-loader { animation-duration: 2s; }
}