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


html,
body {
    width: 100%;
    min-height: 100%;
}


body {
    font-family: Arial, Helvetica, sans-serif;

    background: #ffffff;

    color: #0b0b0b;

    font-size: 12px;
}


/* =========================================================
   LINHA SUPERIOR
========================================================= */

.top-line {
    width: 100%;
    height: 2px;

    background: #22272a;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    width: 100%;
    height: 61px;

    border-bottom: 1px solid #d9dee7;

    background: #ffffff;
}


.header-inner {
    width: 1184px;
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 18px;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    width: 36px;
    height: 40px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.logo svg {
    width: 40px;
    height: 40px;

    display: block;
}

.olx-logo-olx--o {
    fill: #6e0ad6;
}

.olx-logo-olx--l {
    fill: #8ce563;
}

.olx-logo-olx--x {
    fill: #f28000;
}

/* =========================================================
   BUSCA
========================================================= */

.search {
    width: 450px;
    height: 37px;

    position: relative;

    flex-shrink: 0;
}


.search input {
    width: 100%;
    height: 100%;

    border: 1px solid #cfd6e0;

    border-radius: 8px;

    outline: none;

    padding: 0 43px 0 13px;

    font-size: 12px;

    background: #ffffff;

    color: #212121;
}


.search input::placeholder {
    color: #758298;
}


.search button {
    position: absolute;

    right: 11px;
    top: 50%;

    transform: translateY(-50%);

    width: 21px;
    height: 21px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 0;

    background: transparent;

    color: #050505;
}


.search svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   MENU HEADER
========================================================= */

.nav {
    display: flex;
    align-items: center;

    gap: 20px;

    white-space: nowrap;
}


.nav a {
    display: flex;
    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: #070707;

    font-size: 11px;
    font-weight: 600;
}


.nav svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   BOTÕES HEADER
========================================================= */

.login {
    width: 104px;
    height: 36px;

    margin-left: auto;

    border: 1px solid #cbd2dd;

    border-radius: 100px;

    background: #ffffff;

    font-size: 11px;
    font-weight: 600;

    color: #111111;

    cursor: pointer;
}


.announce {
    height: 36px;

    padding: 0 21px;

    border: 0;

    border-radius: 100px;

    background: #6e00dc;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
}


.announce svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   CONTAINER PRINCIPAL
========================================================= */

.page {
    width: 1184px;

    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumbs {
    height: 48px;

    display: flex;
    align-items: center;

    gap: 7px;
}


.breadcrumbs a {
    color: #050505;

    font-size: 9px;

    text-decoration: none;
}


.breadcrumbs svg {
    width: 10px;
    height: 10px;
}


/* =========================================================
   GRID PRINCIPAL
========================================================= */

.main-grid {
    display: grid;

    grid-template-columns: 880px 278px;

    gap: 24px;
}


/* =========================================================
   GALERIA
========================================================= */

.gallery {
    width: 880px;
    height: 344px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 4px;

    overflow: hidden;

    border-radius: 4px;
}


.photo {
    width: 100%;
    height: 344px;

    background: #eeeeee;

    overflow: hidden;

    position: relative;
}


.photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.guarantee {
    position: absolute;

    left: 12px;
    bottom: 10px;

    min-width: 114px;
    height: 24px;

    padding: 0 10px;

    border-radius: 20px;

    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    font-size: 10px;
    font-weight: 700;
}


.shield {
    color: #6800d8;

    font-size: 11px;
}


/* =========================================================
   TAGS
========================================================= */

.tags {
    height: 31px;

    display: flex;
    align-items: flex-start;

    gap: 6px;

    padding-top: 8px;
}


.tag {
    height: 15px;

    padding: 0 9px;

    border-radius: 8px;

    display: inline-flex;
    align-items: center;

    font-size: 8px;
}


.tag.green {
    color: #168e25;

    background: #d9f8cb;
}


.tag.purple {
    color: #6600d8;

    background: #eadcff;
}


/* =========================================================
   PRODUTO
========================================================= */

.product-info {
    padding-top: 22px;

    height: 145px;
}


.product-info h1 {
    margin-bottom: 20px;

    font-size: 18px;

    font-weight: 700;
}


.product-info p {
    margin-bottom: 5px;

    font-size: 12px;

    line-height: 1.4;
}


.phone {
    color: #6500d8;

    text-decoration: none;

    font-size: 12px;
}


/* =========================================================
   CONSÓRCIO
========================================================= */

.consortium {
    width: 100%;
    min-height: 116px;

    border: 1px solid #cbd2dc;

    border-radius: 6px;

    display: flex;
    align-items: center;

    padding: 13px 17px;

    margin-top: 1px;
}


.consortium-art {
    width: 66px;

    flex-shrink: 0;

    display: flex;
    justify-content: center;
}


.art-phone {
    width: 30px;
    height: 58px;

    position: relative;

    border: 1px solid #1c1c1c;

    border-radius: 7px;

    transform: rotate(-8deg);
}


.art-phone::after {
    content: "";

    position: absolute;

    left: 6px;
    bottom: 7px;

    width: 15px;
    height: 2px;

    border-radius: 3px;

    background: #8c00e8;
}


.art-check {
    position: absolute;

    right: -14px;
    top: 5px;

    width: 22px;
    height: 20px;

    border-radius: 3px;

    background: #7600db;

    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
}


.consortium-content {
    padding-left: 7px;
}


.consortium-title-row {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;
}


.consortium h2 {
    font-size: 15px;

    font-weight: 700;
}


.new {
    padding: 3px 7px;

    border-radius: 5px;

    background: #f4004e;

    color: #ffffff;

    font-size: 8px;
}


.consortium p {
    max-width: 740px;

    margin-bottom: 10px;

    line-height: 1.4;

    font-size: 10px;
}


.consortium button {
    height: 25px;

    padding: 0 12px;

    border: 1px solid #535b68;

    border-radius: 20px;

    background: #ffffff;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   SIDEBAR TOPO
========================================================= */

.sidebar-top {
    height: 31px;

    margin-top: -31px;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 18px;
}


.date {
    margin-right: 3px;

    color: #65738a;

    font-size: 9px;
}


.icon-action {
    border: 0;

    background: transparent;

    width: 18px;
    height: 18px;

    cursor: pointer;
}


.icon-action svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   CARD DE COMPRA
========================================================= */

.buy-card {
    width: 278px;

    margin-top: 0;

    padding: 24px 12px 24px;

    border: 1px solid #ccd3dd;

    border-radius: 5px;

    background: #ffffff;

    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.09);
}


.old-price {
    margin-bottom: 5px;

    color: #7c8697;

    text-decoration: line-through;

    font-size: 12px;
}


.price-row {
    display: flex;
    align-items: flex-end;

    gap: 5px;

    margin-bottom: 5px;
}


.price {
    font-size: 30px;

    line-height: 1;

    font-weight: 500;
}


.pix {
    margin-bottom: 2px;

    color: #008f43;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   LOGOS PAGAMENTO
========================================================= */

.payment-logos {
    display: flex;
    align-items: center;

    gap: 4px;

    height: 24px;
    margin-top: 4px;
}

.payment-logos img {
    width: 14px;
    height: 24px;

    display: block;

    object-fit: contain;

    flex-shrink: 0;
}


/* =========================================================
   PARCELAMENTO
========================================================= */

.installments {
    margin-top: 1px;

    font-size: 10px;
}


.payment-options {
    display: inline-block;

    margin-top: 5px;

    color: #6500d8;

    text-decoration: underline;

    font-size: 9px;
}


.loan {
    margin-top: 12px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #6500d8;

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;
}


.loan svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   CUPOM
========================================================= */

.coupon {
    width: 100%;
    min-height: 72px;

    margin-top: 23px;

    border-radius: 9px;

    background: #ead8ff;

    display: flex;

    overflow: hidden;
}


.coupon-info {
    flex: 1;

    display: flex;
    align-items: center;

    padding: 9px 8px;
}


.coupon-icon {
    width: 30px;

    flex-shrink: 0;

    display: flex;
    justify-content: center;

    color: #7100dc;
}


.coupon-icon svg {
    width: 21px;
    height: 21px;
}


.coupon-info strong {
    display: block;

    color: #4f00ad;

    font-size: 12px;

    margin-bottom: 2px;
}


.coupon-info p {
    color: #414141;

    font-size: 9px;

    line-height: 1.4;
}


.coupon-info small {
    color: #5b3d85;

    font-size: 7px;
}


.coupon > button {
    width: 54px;

    border: 0;

    background: #7000da;

    color: white;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   FRETE
========================================================= */

.shipping {
    margin-top: 24px;
}


.shipping-header {
    margin-bottom: 8px;

    display: flex;
    justify-content: space-between;
}


.shipping-header strong {
    font-size: 10px;
}


.shipping-header a {
    color: #6500d8;

    text-decoration: underline;

    font-size: 9px;
}


.shipping input {
    width: 100%;
    height: 37px;

    padding: 0 13px;

    border: 1px solid #cbd3df;

    border-radius: 7px;

    outline: none;

    font-size: 11px;
}


.shipping input::placeholder {
    color: #8490a3;
}


/* =========================================================
   BENEFÍCIO
========================================================= */

.benefit {
    min-height: 100px;

    margin-top: 23px;

    border: 1px solid #cbd3dd;

    border-radius: 9px;

    display: flex;

    padding: 13px;
}


.benefit-logo {
    width: 36px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: #7c00df;
}


.benefit-logo span {
    font-size: 18px;
}


.benefit-logo small {
    color: #542a69;

    text-align: center;

    font-size: 7px;
}


.benefit-text {
    padding-left: 8px;
}


.benefit-text strong {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
}


.benefit-text p {
    color: #505a6e;

    line-height: 1.45;

    font-size: 10px;
}


.benefit-text a {
    color: #5f00d5;

    font-weight: 700;
}


/* =========================================================
   BOTÕES COMPRAR / CHAT
========================================================= */

.buy-button,
.chat-button {
    width: 100%;
    height: 43px;

    margin-top: 17px;

    border-radius: 24px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.buy-button {
    border: 0;

    background: #7100dd;

    color: white;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 7px;
}


.chat-button {
    margin-top: 11px;

    border: 1px solid #59616c;

    background: white;

    color: #050505;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;
}


.buy-button svg,
.chat-button svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   MINI PROPAGANDA
========================================================= */

.mini-ad {
    width: 220px;
    height: 50px;

    margin: 16px auto 0;

    padding: 6px 8px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border: 1px solid #e4e4e4;

    background: #fafafa;

    overflow: hidden;
}


.mini-ad small {
    color: #a0a0a0;

    font-size: 6px;
}


.mini-ad p {
    max-width: 130px;

    font-size: 8px;
}


.mini-ad button {
    height: 24px;

    padding: 0 12px;

    border: 0;

    border-radius: 20px;

    background: #147641;

    color: #ffffff;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1230px) {

    .header-inner,
    .page {
        width: calc(100% - 40px);
    }

    .main-grid {
        grid-template-columns: minmax(0, 1fr) 278px;
    }

    .content,
    .gallery {
        width: 100%;
    }

}


@media (max-width: 1050px) {

    .nav a span {
        display: none;
    }

    .search {
        width: 360px;
    }

}


@media (max-width: 850px) {

    .main-grid {
        display: block;
    }

    .sidebar {
        margin-top: 50px;
    }

    .sidebar-top {
        margin-top: 0;
    }

    .buy-card {
        width: 100%;
    }

    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .header-inner {
        gap: 10px;
    }

    .nav {
        display: none;
    }

    .login {
        display: none;
    }

    .search {
        flex: 1;
        width: auto;
    }

    .announce {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .announce span {
        display: none;
    }

    .gallery {
        height: 300px;

        grid-template-columns: 1fr;
    }

    .photo {
        height: 300px;
    }

    .gallery .photo:not(:first-child) {
        display: none;
    }

}