body {
    font-size: 0.975rem;
    /* Guard against Tailwind preflight (loaded by hyper-wpsl-custom on locations pages)
       overriding the theme body font and line-height. !important beats non-!important
       from any stylesheet regardless of load order. */
    font-family: "Poppins", Helvetica, sans-serif !important;
    line-height: 1.7 !important;
}

p,
ul,
li,
label,
select {
    font-family: 'Poppins', sans-serif !important;
}

/* ── Anti-Tailwind-preflight guards ─────────────────────────────────────
   Tailwind's preflight sets img/svg/video to display:block globally and
   removes all paragraph margins. These rules protect the footer from
   those overrides on pages where the WPSL plugin loads Tailwind CSS.   */
footer img,
footer svg {
    display: inline-block !important;
    vertical-align: middle;
}

footer p {
    margin-bottom: 0.5rem;
}

.main_title p {
    font-family: 'Libre Bodoni', serif !important;
}

.main-menu a,
.main-menu li {
    font-family: 'Poppins', sans-serif !important;
}

/* Header Sticky Shadow */
header.header.sticky {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    border-bottom: none !important;
    /* Removendo a borda padrão para uma sombra mais limpa */
}


header.header {
    min-height: 72px;
    /* altura aproximada do header para evitar pulo inicial */
}

.hero_kenbburns {
    height: 680px !important;
    min-height: 680px !important;
    overflow: hidden;
    position: relative;
    background-color: #1a1a1a;
}

.hero_kenbburns h1 .subtitle {
    font-size: 20px;
    font-size: 1.25rem;
    display: block;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.hero_kenbburns h1 .main-title {
    font-size: 80px;
    font-size: 5rem;
    display: block;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 767px) {
    .hero_kenbburns h1 .subtitle {
        font-size: 14px;
        font-size: 0.875rem;
    }

    .hero_kenbburns h1 .main-title {
        font-size: 40px;
        font-size: 2.5rem;
    }
}

/* Footer Custom Styles */
footer {
    padding: 30px 0 10px 0 !important;
}

/* Lock the footer container to the same max-width used on all non-locations pages
   (from style.css: .container { max-width: 1280px !important }).
   Tailwind (loaded by hyper-wpsl-custom) sets .container { max-width: 1536px !important }
   inside a @media (min-width: 1536px) block. Since both use !important, specificity
   decides: `footer .container` (0,0,2) beats `.container` (0,0,1). */
footer .container {
    max-width: 1280px !important;
}

.text-ks-red {
    color: #DD5942 !important;
}

footer .footer_wp h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-family: "Poppins", Helvetica, sans-serif !important;
}

footer ul {
    margin-bottom: 15px !important;
}

footer ul li {
    margin-bottom: 4px;
}

footer .follow_us ul {
    float: none;
    margin-bottom: 0;
}

footer .follow_us ul li {
    margin: 0 8px;
}

footer .footer_links {
    margin: 10px 0;
}

footer .footer_links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin: 0 8px;
    font-size: 0.85rem;
}

footer .footer_links a:hover {
    color: #fff !important;
    text-underline-offset: 4px;
    text-decoration: underline;
}

/* Counter the global `a:hover { color: #DD5942 !important }` rule injected by
   the hyper-wpsl-custom plugin on locations pages. Higher specificity wins
   over same-specificity !important, so `footer a:hover` (0,0,2) beats
   bare `a:hover` (0,0,1) even when both carry !important.              */
footer a:hover {
    color: rgba(255, 255, 255, 0.95) !important;
}

ul.footer-bottom-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

ul.footer-bottom-nav li {
    margin: 0;
    display: flex;
    align-items: center;
}

ul.footer-bottom-nav li:not(:last-child)::after {
    content: "|";
    color: rgba(255, 255, 255, 0.8);
    margin: 0 8px;
    font-size: 0.85rem;
}

footer hr {
    margin: 20px 0;
}

.app-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-badges a img {
    height: 32px;
    width: auto;
    transition: transform 0.3s ease;
}

.app-badges a img:hover {
    transform: scale(1.05);
}

.download-app-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}

footer .copy {
    font-size: 0.85rem;
}

/* Hero & CTA Buttons (Fogo de Chão style) */
a.btn_1,
.btn_1 {
    border-radius: 0 !important;
    /* Sharp corners */
}

.btn_1.outline.white {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(2px);
}

.btn_1.outline.white:hover {
    background-color: #fff !important;
    color: #231F20 !important;
    border-color: #fff !important;
}

/* Larger CTA Buttons */
a.btn_1.medium,
.btn_1.medium {
    padding: 12px 30px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 767px) {

    a.btn_1.medium,
    .btn_1.medium {
        padding: 12px 25px !important;
        font-size: 0.8rem !important;
        width: 100%;
        max-width: 280px;
    }
}

/* --- NEW EXPERIENCE SECTION (Fogo Style) --- */
.experience_section {
    padding: 100px 0;
    background-color: #fff;
    min-height: 800px;
    /* reserva espaço para evitar shift da seção inteira */
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
}

.subtitle_experience {
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 5px;
    color: #DD5942;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.script_experience {
    text-align: center;
    font-family: 'Libre Bodoni', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2.5rem;
    color: #231F20;
    margin-bottom: 60px;
    display: block;
}

.mega_title {
    line-height: 0.85;
    margin-bottom: 40px;
}

.mega_title .highlight {
    color: #DD5942;
    /* Brand Highlight Color */
    font-size: 5.5rem;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
}

.mega_title .black {
    color: #231F20;
    font-size: 5.5rem;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
}

.mega_title .script {
    font-family: 'Libre Bodoni', serif;
    font-style: italic;
    font-size: 4rem;
    display: block;
    margin-top: -5px;
    color: #231F20;
}

.img_square_experience {
    width: 600px;
    /* Largura base no desktop */
    height: 450px;
    /* Altura base no desktop */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.experience_intro_text {
    max-width: 700px;
    margin: 60px auto;
    text-align: center;
}

.experience_intro_text p {
    font-size: 1.15rem;
    color: #444;
    line-height: 1.8;
}

/* 3 Experience Boxes */
.exp_grid {
    margin-top: 40px;
}

.exp_box {
    position: relative;
    height: 550px;
    overflow: hidden;
    margin-bottom: 30px;
}

.exp_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.exp_box:hover img {
    transform: scale(1.08);
}

.exp_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Fundo mais uniforme para destacar o texto centralizado */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    transition: background 0.5s ease;
}

.exp_box:hover .exp_overlay {
    background: rgba(0, 0, 0, 0.6);
}

.exp_overlay .script {
    font-family: 'Libre Bodoni', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 2px;
    display: block;
}

.exp_overlay h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
    /* Removido margem para o botão não descer junto */
    line-height: 1.1;
}

.exp_overlay .btn_1 {
    position: absolute;
    bottom: 30px;
    min-width: 160px;
}

/* Timeline Section Styles */
.journey_section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.timeline_item {
    padding: 30px;
    border-left: 2px solid #DD5942;
    margin-bottom: 40px;
    position: relative;
}

.timeline_year {
    font-weight: 900;
    font-size: 2.5rem;
    color: #231F20;
    opacity: 0.1;
    position: absolute;
    top: 10px;
    right: 20px;
}

.timeline_item h4 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #DD5942;
}

.timeline_item .date {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #999;
}

@media (max-width: 991px) {

    .mega_title .highlight,
    .mega_title .black {
        font-size: 4rem;
        text-align: center;
    }

    .mega_title .script {
        font-size: 3rem;
        text-align: center;
    }

    .script_experience {
        font-size: 2.2rem;
        margin-bottom: 40px;
    }

    .experience_intro_text {
        margin: 40px auto;
    }

    .experience_intro_text p {
        text-align: center;
    }

    .exp_box {
        height: 450px;
    }
}

@media (max-width: 767px) {
    .experience_section {
        padding: 60px 0;
    }

    .subtitle_experience {
        font-size: 0.65rem;
    }

    .script_experience {
        font-size: 1.8rem;
        margin-bottom: 0;
    }

    .mega_title {
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .mega_title .highlight,
    .mega_title .black {
        font-size: 3.5rem;
        line-height: 0.9;
    }

    .mega_title .script {
        font-size: 2.5rem;
        margin-top: 5px;
    }

    .experience_intro_text p {
        font-size: 1rem;
    }
}

/* Collage Section Styles */
.collage_container {
    position: relative;
    padding-bottom: 50px;
}

.collage_main {
    transition: transform 0.5s ease;
    max-width: 85%;
    /* Reduced size */
}

.collage_sub_wrapper {
    margin-top: -80px !important;
    /* Adjusted overlap for smaller main image */
    position: relative;
    z-index: 2;
}

.collage_sub {
    border-width: 8px !important;
    transition: transform 0.5s ease;
    background-color: #fff;
}

.collage_container:hover .collage_main {
    transform: translateY(-10px);
}

.collage_container:hover .collage_sub {
    transform: scale(1.05);
}

@media (max-width: 991px) {
    .collage_sub_wrapper {
        margin-top: -50px !important;
    }
}

@media (max-width: 767px) {
    .collage_sub_wrapper {
        margin-top: 20px !important;
    }
}

/* Reviews Section */
#reviews {
    min-height: 200px;
    margin-top: 40px;
}

#reviews div[class^="ti-"] {
    margin: 0 auto !important;
}

/* Force dark text for reviews on light background */
#reviews .ti-widget .ti-name,
#reviews .ti-widget .ti-review-content,
#reviews .ti-widget .ti-review-text-container,
#reviews .ti-widget .ti-header-rating-reviews,
#reviews .ti-widget .ti-show-original-text,
#reviews .ti-widget .ti-profile-details,
#reviews .ti-widget .ti-date,
#reviews .ti-widget .ti-header-title,
#reviews .ti-widget .ti-text {
    color: #444 !important;
}

/* Instagram Feed Section */
#instagram-feed {
    min-height: 500px;
    margin-top: 20px;
    overflow: hidden;
}

/* Container lazy do feed - oculta qualquer barra extra do widget */
#insta-lazy-container {
    overflow: hidden;
    position: relative;
}

/* Esconde a barra de branding preta do Trustindex em todos os browsers,
   incluindo Safari iOS/macOS onde content-visibility interfere no clipping */
#insta-lazy-container .ti-widget-footer,
#insta-lazy-container [class*="ti-widget-footer"],
#insta-lazy-container [class*="ti-footer"],
#instagram-feed .ti-widget-footer,
#instagram-feed [class*="ti-widget-footer"],
#instagram-feed [class*="ti-footer"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    #instagram-feed {
        min-height: 600px;
    }
}

/* App Section Mockup */
.app_mockup_image {
    margin-top: -40px;
    margin-bottom: -40px;
    aspect-ratio: 260 / 529;
    /* Proporção aproximada para o mockup */
    height: auto;
    position: relative;
    /* Garante que o z-index funcione e a div sobreponha */
    z-index: 20;
    /* Joga a imagem do App para cima da próxima sessão */
}

/* Fallback e visibilidade do Hero Banner */
.kenburns_slider {
    background: #000;
    min-height: 600px; /* Aumentado para desktop */
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .kenburns_slider {
        min-height: 480px; /* Ajustado para mobile */
    }
}

/* Evita que transições incompletas deixem o banner invisível */
.vegas-slide {
    background: transparent !important;
}

/* Ajuste na opacidade do mask se o JS falhar */
[data-opacity-mask] {
    transition: opacity 0.5s ease;
}

/* Garante que o container do Vegas seja visível */
.vegas-container {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Safari iOS Fix: Garante que o fundo não desapareça */
@supports (-webkit-touch-callout: none) {
   .kenburns_slider {
       background-color: #000 !important;
       -webkit-overflow-scrolling: touch;
   }
   .vegas-slide-inner {
       -webkit-transform: translateZ(0);
       transform: translateZ(0);
       backface-visibility: hidden;
       -webkit-backface-visibility: hidden;
   }
}

/* Center Experience Section on Mobile */
@media (max-width: 991px) {

    .home_intro {
        text-align: center;
    }

    .home_intro .main_title span,
    .home_intro .main_title span em {
        margin: 0 auto !important;
    }

    .home_intro .main_title h2 {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center App Section on Mobile */
    .app_section {
        text-align: center;
    }

    .app_section .main_title span,
    .app_section .main_title span em {
        margin: 0 auto !important;
    }

    .app_section .main_title h2 {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .app_mockup_image {
        margin-top: 0px;
        /* Some spacing from the app store buttons */
        margin-bottom: 20px;
        /* Espaço normal para fechar a sessão dentro da div cinza */
        position: relative;
        z-index: 5;
    }

    .app_section {
        padding-bottom: 40px !important;
    }

    .bg_gray {
        overflow: visible;
        position: relative;
    }

    /* Reduz o gap do topo da próxima seção no mobile para o título "Our" ficar bem próximo do início */
    .margin_120_100.taste_perfection {
        padding-top: 40px !important;
        position: relative;
    }


    /* Center Taste Perfection Section on Mobile */
    .taste_perfection {
        text-align: center;
    }


    .taste-perfection-content .main_title span,
    .taste-perfection-content .main_title span em {
        margin: 0 auto !important;
    }

    .taste-perfection-content .main_title h2 {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center the collage layout on mobile */
    .collage_container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .collage_sub_wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Full width images for collage on mobile */
    .collage_main {
        max-width: 100% !important;
    }

    .collage_sub_wrapper {
        width: 100% !important;
        margin-top: 15px !important;
    }

    .collage_sub {
        width: 100% !important;
        border-width: 0 !important;
        /* Optional: remove border if it looks too thick when full width */
    }

    /* Footer: Download our app spacing */
    .download-app-title {
        margin-bottom: 1rem !important;
    }

    .follow_us {
        margin-top: 1rem !important;
    }
}

.margin_120_0 {
    padding-top: 120px;
    padding-bottom: 0 !important;
}

@media (max-width: 767px) {
    .margin_120_0 {
        padding-top: 60px;
        padding-bottom: 0 !important;
    }
}

/* Our Locations Section */
.locations_section_wrap {
    margin-bottom: 50px !important;
}

/* Mobile Header Adjustments: Logo left, Menu right */
@media (max-width: 991px) {
    header a.open_close {
        left: auto !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%);
        height: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #logo {
        text-align: left !important;
        width: auto !important;
        float: left !important;
    }

    #logo img {
        height: 35px !important;
    }

    /* Mobile Reservation Button */
    .btn_reserve_mobile {
        display: block !important;
        position: absolute;
        right: 60px !important;
        /* Lado esquerdo do ícone do menu (15px + largura aproximada) */
        top: 50% !important;
        transform: translateY(-50%);
        padding: 6px 15px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 4px;
        text-transform: uppercase;
        z-index: 999;
        transition: all 0.3s ease;
        line-height: 1;
    }

    header.header {
        min-height: 55px !important;
    }

    /* State: Normal Header (Logo White) */
    header.header .btn_reserve_mobile {
        background-color: #fff !important;
        color: #231F20 !important;
        border: 1px solid #fff;
    }

    /* State: Sticky Header (Logo Color) */
    header.header.sticky .btn_reserve_mobile {
        background-color: #231F20 !important;
        color: #fff !important;
        border: 1px solid #231F20;
    }
}

/* Hide on Desktop */
@media (min-width: 992px) {
    .btn_reserve_mobile {
        display: none !important;
    }
}

/* Hide social menu on Desktop */
.header_menu_social {
    display: none !important;
}

/* --- MOBILE MENU REDESIGN (Fogo de Chão style) --- */
@media (max-width: 991px) {

    /* Main Menu Overlay Background */
    .main-menu {
        background-color: #fff !important;
        padding: 20px !important;
    }

    /* Top Header inside Menu (Logo & Close) */
    #header_menu {
        background-color: #fff !important;
        padding: 20px 15px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        border-bottom: 0 !important;
    }

    /* Logo inside menu - Left */
    #header_menu a:last-child {
        order: 1;
        margin: 0 !important;
        text-align: left;
        width: auto;
    }

    /* Close Button - Right */
    #header_menu a.open_close {
        order: 2;
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
        left: auto !important;
        color: #231F20 !important;
        font-size: 36px !important;
        margin: 0 !important;
    }

    /* Menu List Styling */
    .main-menu ul:not(.header_menu_social ul) {
        padding: 5px 0 !important;
    }

    .main-menu ul li {
        border: none !important;
    }

    .main-menu ul li a {
        color: #231F20 !important;
        font-weight: 700 !important;
        font-family: 'Poppins', sans-serif !important;
        text-transform: uppercase;
        font-size: 1.1rem !important;
        padding: 6px 20px !important;
        background: transparent !important;
        text-align: left;
    }

    /* Remove specific background/styling for Reservations in Mobile Menu */
    .main-menu ul li a.btn_top {
        background: transparent !important;
        color: #231F20 !important;
        padding: 6px 20px !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Social Icons under menu */
    .header_menu_social {
        display: block !important;
        padding: 20px !important;
        margin-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .header_menu_social ul {
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .header_menu_social ul li {
        display: inline-block;
        padding: 0 !important;
        border: none !important;
    }

    .header_menu_social ul li a {
        font-size: 18px !important;
        padding: 0 !important;
        color: #231F20 !important;
    }

    /* Highlight last item as a button */
    .main-menu ul:not(.header_menu_social ul) li:last-child {
        padding: 10px 20px !important;
    }

    .main-menu ul:not(.header_menu_social ul) li:last-child a {
        background-color: #DD5942 !important;
        color: #fff !important;
        text-align: center !important;
        padding: 15px 20px !important;
        display: block !important;
        border-radius: 4px;
        font-family: 'Poppins', sans-serif !important;
        letter-spacing: 2px;
        font-size: 1.1rem !important;
        margin-top: 10px;
        box-shadow: 0 4px 10px rgba(221, 89, 66, 0.3);
        transition: all 0.3s ease;
    }

    .main-menu ul:not(.header_menu_social ul) li:last-child a:hover {
        background-color: #231F20 !important;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }
}

/* --- MOBILE STICKY QUICK ACTIONS --- */
@media (max-width: 991px) {
    .boxFooterScreen {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
        z-index: 9998;
        padding: 12px 15px;
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: center;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform: translateY(105%);
        opacity: 0;
        visibility: hidden;
    }

    /* Show when active */
    .boxFooterScreen.show-bar {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .boxFooterScreen a.btnGeralNew {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 10px;
        border-radius: 6px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.5px;
        text-decoration: none;
        text-align: center;
        line-height: 1;
        font-family: 'Libre Bodoni', serif;
    }

    /* App Button: Black */
    .btnAppDownloadFooter {
        background-color: #231F20;
        color: #fff !important;
    }

    /* Online Order Button: Orange (Brand Highlight) */
    .btnOrderOnlineFooter {
        background-color: #DD5942;
        color: #fff !important;
    }
}

/* Desktop: Always Hidden */
@media (min-width: 992px) {
    .boxFooterScreen {
        display: none !important;
    }
}

/* --- TASTE PERFECTION NEW LAYOUT --- */
.vertical-slider-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#verticalPortraitCarousel,
#verticalPortraitCarousel .carousel-inner,
#verticalPortraitCarousel .carousel-item {
    height: 650px;
    /* Portrait aspect */
    width: 100%;
}

#verticalPortraitCarousel .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Custom CSS to force BOOTSTRAP CAROUSEL to slide VERTICALLY */
.carousel-vertical .carousel-item {
    transition: transform 0.6s ease-in-out !important;
}

@media all and (transform-3d),
(-webkit-transform-3d) {

    .carousel-vertical .carousel-item-next,
    .carousel-vertical .carousel-item-prev,
    .carousel-vertical .carousel-item.active {
        display: block;
        transform: translateY(0);
    }

    .carousel-vertical .carousel-item-next:not(.carousel-item-start),
    .carousel-vertical .active.carousel-item-end {
        transform: translateY(100%) !important;
        transform: translate3d(0, 100%, 0) !important;
    }

    .carousel-vertical .carousel-item-prev:not(.carousel-item-end),
    .carousel-vertical .active.carousel-item-start {
        transform: translateY(-100%) !important;
        transform: translate3d(0, -100%, 0) !important;
    }

    .carousel-vertical .carousel-item-next.carousel-item-start,
    .carousel-vertical .carousel-item-prev.carousel-item-end {
        transform: translateY(0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

.custom-carousel-nav {
    width: 45px;
    height: 45px;
    background-color: #000;
    opacity: 0.9 !important;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    border-radius: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
}

.custom-carousel-nav.carousel-control-prev {
    left: 0;
}

.custom-carousel-nav.carousel-control-next {
    right: 0;
    left: auto;
}

.custom-carousel-nav i {
    font-size: 1.2rem;
    color: #ffffff;
}

.custom-carousel-nav:hover {
    background-color: #DD5942;
    opacity: 1 !important;
}

.taste-perfection-content {
    padding-left: 20px;
}

.taste-perfection-decor-line {
    position: absolute;
    left: 0;
    top: 5%;
    bottom: 5%;
    width: 1px;
    background-color: #e2e2e2;
}

.taste-perfection-decor-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -3px;
    width: 7px;
    height: 7px;
    background-color: #DD5942;
    transform: translateY(-50%) rotate(45deg);
}

.taste-perfection-text-wrapper {
    padding-left: 30px;
}

.taste-script {
    font-family: 'Libre Bodoni', serif;
    font-style: italic;
    color: #DD5942;
    font-size: 2.2rem;
    display: inline-block;
    margin-bottom: 5px;
}

.taste-title {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-size: 3.8rem;
    line-height: 1.05;
    color: #231F20;
    margin-bottom: 25px;
    font-weight: 300;
    letter-spacing: 1px;
}

.taste-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: #DD5942;
    margin-top: 25px;
}

.taste-subtitle {
    font-weight: 300;
    font-size: 1.35rem;
    color: #231F20;
    line-height: 1.5;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.taste-perfection-text-wrapper p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.8;
}

.btn_reservation_styled {
    display: inline-flex;
    align-items: center;
    background-color: #231F20;
    color: #fff !important;
    /* Force white text */
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    /* Lighter font */
    letter-spacing: 3px;
    border: none;
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding-left: 30px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
}

.btn_reservation_styled:hover {
    background-color: #DD5942;
    color: #fff !important;
    text-decoration: none;
}

.btn_reservation_styled .icon-wrap {
    background-color: #eeeeee;
    color: #231F20;
    padding: 18px 22px;
    margin-left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 1.1rem;
}

.btn_reservation_styled:hover .icon-wrap {
    background-color: #c04834;
    color: #fff;
}

@media (max-width: 991px) {
    .taste-perfection-decor-line {
        display: none;
    }

    .taste-perfection-text-wrapper {
        padding-left: 0;
    }

    .taste-title {
        font-size: 2.5rem;
    }

    .taste-title::after {
        margin-left: auto;
        margin-right: auto;
    }

    .our-story-btn-wrapper {
        margin-bottom: 30px;
    }

    .taste-subtitle {
        font-size: 1.15rem;
    }

    #verticalPortraitCarousel,
    #verticalPortraitCarousel .carousel-inner,
    #verticalPortraitCarousel .carousel-item {
        height: 450px;
    }

    .btn_reservation_styled {
        width: 100%;
        justify-content: space-between;
    }
}

/* =============================================
   Gift Card Section
   ============================================= */
.ks-gc-section {
    background-color: #fff;
    padding: 80px 0 100px;
}

.ks-gc-image-wrap {
    position: relative;
    /* padding creates room for the L-border without overflow */
    padding-top: 20px;
    padding-left: 20px;
}

.ks-gc-image-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* stays inside the wrapper's box — no negative values */
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-top: 3px solid #DD5942;
    border-left: 3px solid #DD5942;
    pointer-events: none;
}

.ks-gc-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.ks-gc-text {
    padding-left: 10px;
}

.ks-gc-script {
    font-family: 'Libre Bodoni', serif;
    font-style: italic;
    color: #DD5942;
    font-size: 2.2rem;
    display: block;
    margin-bottom: 8px;
}

.ks-gc-title {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-size: 3.2rem;
    line-height: 1.1;
    color: #231F20;
    margin-bottom: 25px;
    font-weight: 300;
    letter-spacing: 1px;
}

.ks-gc-divider {
    width: 120px;
    height: 2px;
    background-color: #DD5942;
    border: none;
    opacity: 1;
    margin: 0 0 25px 0;
}

.ks-gc-subtitle {
    font-weight: 400;
    font-size: 1.1rem;
    color: #231F20;
    line-height: 1.5;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ks-gc-desc {
    color: #666;
    font-size: 1rem;
    line-height: 1.8;
}

@media (max-width: 1199px) {
    .ks-gc-title {
        font-size: 2.6rem;
    }
}

@media (max-width: 991px) {
    .ks-gc-section {
        padding: 50px 0 60px;
    }

    .ks-gc-image-wrap {
        margin-bottom: 30px;
    }

    .ks-gc-title {
        font-size: 2.2rem;
    }

    .ks-gc-text {
        padding-left: 0;
        text-align: center;
    }

    .ks-gc-divider {
        margin-left: auto;
        margin-right: auto;
    }

    .ks-gc-subtitle {
        font-size: 1rem;
    }
}


/* =============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================= */

/* Styling for the new SVG icons */
svg.bi,
.open_close svg,
#toTop svg,
.follow_us svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

header a.open_close svg {
    width: 28px;
    height: 28px;
}

.custom-carousel-nav svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.header_menu_social ul li a svg {
    width: 20px;
    height: 20px;
}

.follow_us ul li a svg {
    width: 20px;
    height: 20px;
}

/**
 * content-visibility: auto para seções abaixo do fold.
 * O browser pula o render dessas seções até o usuário
 * chegar perto delas, melhorando o tempo de renderização
 * inicial (especialmente no mobile).
 */
.taste_perfection,
.locations_section_wrap,
#reviews {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

/* #instagram-feed foi removido do content-visibility:auto intencionalmente:
   no Safari (iOS e macOS) essa propriedade cria um contexto de contenção que
   impede o overflow:hidden de clipar corretamente o footer preto do Trustindex. */

/* .ks-gc-section não usa mais margin-top negativo, portanto
   não tem problema com stacking context do content-visibility. */

/**
 * Estabiliza o layout do hero para evitar CLS.
 * Define altura mínima antes do slider carregar.
 */
.hero_kenbburns {
    min-height: 680px;
    background-color: #1a1a1a;
    /* evita flash de branco antes do slider */
}

@media (max-width: 767px) {
    .hero_kenbburns {
        min-height: 400px !important;
        height: 400px !important;
    }

    .experience_section {
        min-height: 1100px;
        /* seção fica mais alta no mobile devido ao stack de colunas */
        contain-intrinsic-size: 0 1100px;
    }
}

/**
 * Reserva espaço para o mockup do app evitando CLS.
 */
.app_mockup_image {
    min-width: 200px;
    min-height: 300px;
}

/**
 * Garante aspect-ratio nos boxes de imagem do carousel (journey)
 * para evitar reflow ao carregar as imagens.
 */
#verticalPortraitCarousel .carousel-item img {
    aspect-ratio: 2 / 3;
}

/* ── Header opaque on single location pages ─────────────────────────────────
   wpsl_stores single pages have no dark hero, so the transparent header
   (white text) would be invisible. Force it into the same visual state as
   the sticky/scrolled header: white background, dark logo, dark nav links.
   Body class `single-wpsl_stores` is added automatically by WordPress.
   ───────────────────────────────────────────────────────────────────────── */
.single-wpsl_stores header.header {
    background-color: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Show dark (color) logo, hide white logo */
.single-wpsl_stores header.header .logo_normal {
    display: none !important;
}
.single-wpsl_stores header.header .logo_sticky {
    display: inline-block !important;
}

/* Nav links → dark (exclude Reservations btn_top) */
.single-wpsl_stores header.header .main-menu > ul > li > a:not(.btn_top) {
    color: #444 !important;
}
.single-wpsl_stores header.header .main-menu > ul > li:hover > a:not(.btn_top) {
    color: #DD5942 !important;
    opacity: 1 !important;
}

/* Reservations btn_top → black bg, white text (default + sticky) */
.single-wpsl_stores header.header .main-menu > ul > li > a.btn_top,
.single-wpsl_stores header.header .main-menu > ul > li > a.btn_top.order,
.single-wpsl_stores header.header.sticky .main-menu > ul > li > a.btn_top,
.single-wpsl_stores header.header.sticky .main-menu > ul > li > a.btn_top.order {
    color: #fff !important;
    background-color: #231F20 !important;
    border-color: #231F20 !important;
}
.single-wpsl_stores header.header .main-menu > ul > li > a.btn_top:hover,
.single-wpsl_stores header.header.sticky .main-menu > ul > li > a.btn_top:hover {
    background-color: #111 !important;
    color: #fff !important;
}

/* Mobile hamburger icon → dark */
.single-wpsl_stores header.header a.open_close {
    color: #444 !important;
}

/* Mobile Reservations button stays white text */
.single-wpsl_stores header.header a.btn_reserve_mobile {
    color: #fff !important;
}

/* ── Global: Reservations btn_top in sticky state → black bg, white text ─────
   style.css sets all sticky nav links to #444; override the btn_top.order
   button to black across all pages on scroll.
   ─────────────────────────────────────────────────────────────────────────── */
header.header.sticky .main-menu > ul > li > a.btn_top,
header.header.sticky .main-menu > ul > li > a.btn_top.order {
    color: #fff !important;
    background-color: #231F20 !important;
    border-color: #231F20 !important;
}
header.header.sticky .main-menu > ul > li > a.btn_top:hover {
    background-color: #111 !important;
    color: #fff !important;
}

/* ── Breadcrumb spacing: push content below fixed header ─────────────────────
   The store-page-content has pt-10 (40px Tailwind) which is not enough
   to clear the ~72px fixed header. Override to 90px.
   ─────────────────────────────────────────────────────────────────────────── */
.single-wpsl_stores .store-page-content {
    padding-top: 90px !important;
}
@media (max-width: 991px) {
    .single-wpsl_stores .store-page-content {
        padding-top: 76px !important;
    }
}