html { scroll-behavior: smooth; scroll-padding-top: 100px; }

@media (max-width: 992px) {
    html { scroll-padding-top: 200px; }
}

@media (max-width: 572px) {
    html { scroll-padding-top: 180px; }
}

body { padding-top: 197px; background-color: #503628; }
main { position: relative; }
main.download-app-main { margin-top: 0; }

@media(max-width: 992px) {
    body { padding-top: 200px; }
    body.scrolling { padding-top: 160px; }
    body:has(main:not(.download-app-main)) { padding-top: 150px; }
}

.rnk-scroll-top {position: fixed;bottom: 9rem;right: 1rem;width: 48px;height: 48px;display: block;z-index: 2; cursor: pointer; display: none;}

@media (max-width: 576px) {
    .rnk-scroll-top { display: block; }
}

/* RNK COMP > CONTAINER DESTAQUE */
.rnk-container-destaque { background: url("https://swiftbr.vteximg.com.br/arquivos/rnk-raizes-do-sul-destaque-banner.png") no-repeat; padding: 2rem 0 5.5rem 0; background-position: center; background-size: cover; }

@media (max-width: 768px) {
    .rnk-container-destaque { background: url("https://swiftbr.vteximg.com.br/arquivos/rnk-raizes-do-sul-destaque-banner-mobile.png") no-repeat; background-position: center; background-size: cover; }
}

/* RNK COMP > BENEFÍCIOS */
.rnk-container-beneficios ul:empty { display: none; }
.rnk-container-beneficios ul { display: flex; align-items: center; justify-content: space-between; gap: 40px; list-style: none; padding: 24px 0px; margin-bottom: 0; overflow: auto; }
.rnk-container-beneficios ul li,
.rnk-container-beneficios ul a { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 10px; color: #FFFFFF; min-width: 235px; text-decoration: none; }
.rnk-container-beneficios ul h3 {  font-family: "Bellefair", serif; font-size: 20px; font-weight: 400; text-transform: uppercase; margin: 0; }
.rnk-container-beneficios ul p { font-family: 'Nunito'; font-size: 12px; margin: 0; }

@media(max-width: 768px) {
    .rnk-container-beneficios ul { gap: 1rem; }
    .rnk-container-beneficios ul h3 { font-size: 18px; }
}

.rnk-container-linha-premium { background: url("https://swiftbr.vteximg.com.br/arquivos/rnk-raizes-do-sul-linha-premium-background.png") no-repeat; padding: 2rem 0; background-position: top; background-size: cover; }
.rnk-container-linha-premium p { font-family: 'Nunito'; font-size: 28px; color: #D0C0A6; }
.rnk-container-linha-premium .row { justify-content: center; }
.rnk-container-linha-premium .row .col-md-10 { display: flex; }
.rnk-container-linha-premium .row .col-md-10 span { display: flex; height: 1px; width: 100%; background-color: #D0C0A6; }
.rnk-container-linha-premium .row .col-12 { text-align: center; }
.rnk-container-linha-premium .row .col-12 a { margin-top: 490px; font-family: 'Nunito'; font-size: 16px; color: #D0C0A6; background: linear-gradient(90deg, #A88F73 0%, #58422C 100%); border: 1px solid #D0C0A6; border-radius: 50rem !important; }
.rnk-container-linha-premium .row .col-12 a:hover { box-shadow: #d0c0a64d 0px 2px 8px 0px; }

@media (max-width: 768px) {
    .rnk-container-linha-premium { background: url("https://swiftbr.vteximg.com.br/arquivos/rnk-raizes-do-sul-linha-premium-background-mobile.png") no-repeat; padding: 2rem 0; background-position: center; background-size: cover; }
    .rnk-container-linha-premium p { font-size: 20px; }
    .rnk-container-linha-premium .row .col-12 a { margin-top: 280px; }
}

@media (max-width: 576px) {
    .rnk-container-linha-premium img { max-width: 100px; }
}


/* RNK COMP > CONTAINER PRATELEIRA E FILTROS */
.rnk-container-prateleira-e-filtros { padding: 3.75rem 0; }
.rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul { position: relative; display: flex; align-items: center; justify-content: center; gap: 2rem; list-style: none; padding: 0; overflow: auto; }
.rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul::after { content: ""; position: absolute; right: 0; height: 4px; width: 10%; background-color: #D0C0A6; }
.rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul::before { content: ""; position: absolute; left: 0; height: 4px; width: 10%; background-color: #D0C0A6; }
.rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul li a { font-family: 'Nunito'; font-size: 32px; color: #D0C0A6; }
.btn.rnk-btn-success.btn-success.rnk-buy-btn { background-color: #988356; }

@media (max-width: 992px) {
    .rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul li a { font-size: 24px; }
}

@media (max-width: 768px) {    
    .rnk-container-prateleira-e-filtros { padding: 2rem 0; }
    .rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul { gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
    .rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul::after { display: none; }
    .rnk-container-prateleira-e-filtros > .container-lg > .row > .col-12:first-child ul::before { display: none; }
}

/* RNK COMP > CONTAINER PRATELEIRA */
.rnk-container-prateleira { padding: 0; }
.rnk-container-prateleira .splide ul.splide__pagination { display: none; }
.rnk-container-prateleira .splide .splide__list { flex-wrap: nowrap!important; }
.rnk-container-prateleira .splide div.splide__arrows { display: block }
.rnk-container-prateleira .splide__arrow svg {fill: white;}
.rnk-container-prateleira .track-shelf h2 { display: none; }
.rnk-container-prateleira .rnk-card-quantidade input,
.rnk-container-prateleira .rnk-componente-card-prateleira { background: transparent; }
.rnk-container-prateleira .rnk-componente-card-prateleira .product-name { font-family: 'Barlow Condensed'; }
.rnk-container-prateleira .rnk-componente-card-prateleira .rnk-card-valor { margin: 0; height: auto; }
.rnk-container-prateleira .rnk-componente-card-prateleira .card-body {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(21.857023239135742px);
}

@media (max-width: 768px) {
    .rnk-container-prateleira-bg .rnk-container-vitrine-destaque > .row:first-child h2 { font-size: 1.5rem; letter-spacing: 2px; }
}


/* RNK CONTAINER VIDEO */
.rnk-container-video { background: url("https://swiftbr.vteximg.com.br/arquivos/rnk-raizes-do-sul-video-background.png") no-repeat; padding: 3rem 0; background-position: top; background-size: cover; }
.rnk-container-video .col-md-5 { text-align: center; }
.rnk-container-video .col-md-7 { display: flex; align-items: center; justify-content: center; }
.rnk-container-video .col-md-7 iframe { margin: 0; aspect-ratio: 16 / 9; width: 100%; height: auto; }

@media (max-width: 768px) {
    .rnk-container-video { padding: 1rem 0 2rem 0; }
}


/* RNK CONTAINER CONTEÚDO */
.rnk-container-orgulho { background: url("https://swiftbr.vteximg.com.br/arquivos/rnk-raizes-do-sul-rs-background.png") no-repeat; padding: 1rem 0 2rem 0; background-position: top; background-size: cover; }
.rnk-container-orgulho .row .col-lg-6:first-child { position: relative; }
.rnk-container-orgulho .row .col-lg-6:first-child img { max-width: 100%; }
.rnk-container-orgulho .row .col-lg-6:first-child div { position: absolute; top: -20px; left: 50%; transform: translate(-50%, 100%); color: #D0C0A6; }
.rnk-container-orgulho .row .col-lg-6:first-child div h2 { font-size: 32px; line-height: 32px; }
.rnk-container-orgulho .row .col-lg-6:first-child div p { font-size: 24px; line-height: 30px; }
.rnk-container-orgulho .row .col-lg-6:last-child { display: flex; align-items: center; justify-content: center; }
.rnk-container-orgulho .row .rnk-orgulho-conteudo { display: flex; flex-direction: column; justify-content: center; max-width: max-content; }
.rnk-container-orgulho .row .rnk-orgulho-conteudo img { max-width: max-content; order: 1; }
.rnk-container-orgulho .row .rnk-orgulho-conteudo div:nth-child(1) { order: 2; }
.rnk-container-orgulho .row .rnk-orgulho-conteudo div:nth-child(2) { order: 3; }
.rnk-container-orgulho .row .rnk-orgulho-conteudo div:nth-child(3) { order: 4; }
.rnk-container-orgulho .row .rnk-orgulho-conteudo div h2 { color: #D0C0A6; font-size: 40px; text-transform: uppercase; }
.rnk-container-orgulho .row .rnk-orgulho-conteudo div p { color: #D0C0A6; font-size: 20px; }

@media (max-width: 1200px) {
    .rnk-container-orgulho .row .col-lg-6:first-child div { top: 0; left: 50%; transform: translate(-40%, 50%); }
    .rnk-container-orgulho .row .col-lg-6:first-child div h2 { font-size: 28px; line-height: 28px; }
}

@media (max-width: 992px) {
    .rnk-container-orgulho .row .col-lg-6:first-child { display: flex; align-items: center; justify-content: center; }
    .rnk-container-orgulho .row .col-lg-6:first-child div { top: 50%; left: 50%; transform: translate(-50%, -100%); max-width: 300px; }
}

@media (max-width: 768px) {
    .rnk-container-orgulho .row .rnk-orgulho-conteudo div h2 { font-size: 28px; }
    .rnk-container-orgulho .row .rnk-orgulho-conteudo div p { font-size: 16px; }
    .rnk-container-orgulho .row .rnk-orgulho-conteudo img { max-width: 50px;}
}

@media (max-width: 576px) {
    .rnk-container-orgulho .row .col-lg-6:first-child div { transform: translate(-50%, -70%); }
}

@media (max-width: 360px) {
    .rnk-container-orgulho .row .col-lg-6:first-child div h2 { font-size: 28px; line-height: 28px; }
    .rnk-container-orgulho .row .col-lg-6:first-child div p { font-size: 16px; line-height: 24px; }
    .rnk-container-orgulho .row .col-lg-6:first-child div { transform: translate(-50%, -60%); }
}


/* RNK CONTAINER CONTEUDO */
.rnk-container-tradicao { position: relative; background: url("https://swiftbr.vteximg.com.br/arquivos/rnk-raizes-do-sul-cortes-nobres.png") no-repeat; padding: 10rem 0; background-position: top; background-size: cover; }
.rnk-container-tradicao::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: #0000005e; top: 0; left: 0; }
.rnk-container-tradicao .col-md-6 { display: flex; flex-direction: column; align-items: center; text-align: left; }
.rnk-container-tradicao h2 { font-size: 40px; color: #D0C0A6; max-width: 300px; }
.rnk-container-tradicao p { font-size: 28px; color: #D0C0A6; max-width: 380px; }

@media (max-width: 768px) {
    .rnk-container-tradicao { padding: 5rem 0; }
    .rnk-container-tradicao h2 { font-size: 28px; max-width: 100%; }
    .rnk-container-tradicao p { font-size: 20px; max-width: 100%; }
    .rnk-container-tradicao .col-md-6 { align-items: unset; }
    .rnk-container-tradicao .col-md-6:first-child { margin-bottom: 2rem; }
}


/* RNK COMP SPLIDE */
.rnk-container-cortes-nobres {  padding: 3rem 0; }
.rnk-container-cortes-nobres h2 { font-size: 40px; text-transform: uppercase; letter-spacing: 20%; color: #D0C0A6; text-align: center; margin-bottom: 1.5rem; }
.rnk-container-cortes-nobres ul li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rnk-container-cortes-nobres ul li div { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-bottom: 20px; }
.rnk-container-cortes-nobres ul li div h3 { font-size: 28px; color: #D0C0A6; text-align: center; margin: 0; order: 2; }
.rnk-container-cortes-nobres ul li div p:first-of-type,
.rnk-container-cortes-nobres ul li div p:last-of-type { font-size: 20px; color: #D0C0A6; text-align: center; max-width: 300px; margin: 0; }
.rnk-container-cortes-nobres ul li div p:first-of-type { order: 2; }
.rnk-container-cortes-nobres ul li div p:last-of-type { order: 4; }
.rnk-container-cortes-nobres ul li div div { margin: 0; order: 3; }
.rnk-container-cortes-nobres ul li div img { order: 1; margin-bottom: 1rem; }
.rnk-container-cortes-nobres ul li a { text-transform: uppercase; font-size: 16px; color: #D0C0A6; background: linear-gradient(90deg, #A88F73 0%, #58422C 100%); border: 1px solid #D0C0A6; border-radius: 50rem !important; margin-top: auto; }
.rnk-container-cortes-nobres .splide div.splide__arrows { display: block; }
.rnk-container-cortes-nobres ul li a:hover { color: #D0C0A6; box-shadow: #d0c0a64d 0px 2px 8px 0px; }

@media (max-width: 640px) {
    .rnk-container-cortes-nobres .splide:before { display: none; }
    .rnk-container-cortes-nobres .splide:after { display: none; }
}

@media (max-width: 576px) {
    .rnk-container-cortes-nobres ul li div p:first-of-type,
    .rnk-container-cortes-nobres ul li div p:last-of-type { font-size: 18px; } 
}