/*
Theme Name: FoodMart
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: FoodMart is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
    /* widths for rows and containers
     */
    --header-height       : 160px;
    --header-height-min   : 80px;
}
/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
        --header-height : 100px;
        --header-height-min   : 80px;
    }
}
/* Theme Colors */
:root {
    --accent-color       : #FFC43F;
    --dark-color         : #222222;
    --light-dark-color   : #727272;
    --light-color        : #fff;
    --grey-color         : #dbdbdb;
    --light-grey-color   : #fafafa;
    --primary-color      : #6995B1;
    --light-primary-color   : #eef1f3;
}

/* Fonts */
:root {
    --body-font           : "Open Sans", sans-serif;
    --heading-font        : "Nunito", sans-serif;
}

body {
  --bs-link-color: #333;
  --bs-link-hover-color:#333;

  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;

  /* --bs-link-color: #FFC43F;
  --bs-link-hover-color: #FFC43F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #747474;

  --bs-primary: #FFC43F;
  --bs-primary-rgb: 255, 196, 63;

  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;
  
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;
  
  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;
  /* --bs-success-rgb: 238, 245, 228; */
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ffc43f;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f7a422;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc43f;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}
.btn-outline-primary {
  --bs-btn-color: #ffc43f;
  --bs-btn-border-color: #ffc43f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff3cd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3cd;
  --bs-gradient: none;
}
.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248,249,250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}
.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217,164,6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}
.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}
.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}
body {
  letter-spacing: 0.03em;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  font-weight: 700;
}
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}
.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}
.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}
/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }
  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}

/* Support box: prevent phone number from wrapping */
.support-box h5 {
  white-space: nowrap;
  font-size: 1rem;
}

/* *** Start editing below this line *** */
.container-fluid {
  max-width: 1600px;
}
.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}
.block-1 { grid-area: 1 / 1 / 3 / 8; }
.block-2 { grid-area: 1 / 8 / 2 / 13; }
.block-3 { grid-area: 2 / 8 / 3 / 13; }

@media screen and (max-width:1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 { grid-area: 1 / 1 / 3 / 2; }
  .block-2 { grid-area: 3 / 1 / 4 / 2; }
  .block-3 { grid-area: 4 / 1 / 5 / 2; }
  
}

/* banner ad */
.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.banner-ad.blue {
  background: #e6f3fb;
}
.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #FFF;
  opacity: 1;
  transition: background 0.3s ease-out;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #FFC43F;
}
.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}
/* .banner-ad .banner-content {
  padding: 52px;
}
.banner-ad.large .banner-content {
  padding: 90px;
} */
.banner-ad .banner-content .categories {
  font-family: 'Garamond';
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}
.banner-ad .banner-content .sale {
  position: relative;
  display: inline-block;
}
.banner-ad .banner-content .sale:before {
  content: '';
  width: 80px;
  border-bottom: 1px solid #111;
  position: absolute;
  bottom: 6px;
}
.banner-ad .banner-content .sale:after {
  content: 'SALE';
  font-family: var(--body-font);
  position: absolute;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #252525;
  bottom: 0;
  right: 0;
}
.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}
.banner-ad.large .banner-content .categories {
  color: var(--accent-color);
}
.banner-ad.large .banner-content .banner-title {
  font-size: 54px;
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #F1F1F1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #FFC43F;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea
}
.swiper-prev:hover,
.swiper-next:hover {
  background: #FFC43F;
}
.btn-link {
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
  text-transform: capitalize;
  color: #787878;
}
/* category carousel */
.category-carousel .category-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.category-carousel .category-item:hover {
  transform: translate3d(0,-10px,0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}
.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}
.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}
.brand-carousel .brand-item .brand-title {
  margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;
  
  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}
.product-tabs .nav-tabs .nav-link.active, 
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
}
.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}
.product-item figure {
  background: #F9F9F9;
  border-radius: 12px;
  text-align: center;
}
.product-item figure img {
  max-height: 210px;
  height: auto;
}
.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}
.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}
.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9D9D9D;
}
.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .rating iconify-icon {
  color: #FFC43F;
}
.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .product-qty {
  width: 85px;
}
/* Prevent bottom actions row from wrapping onto separate lines */
.product-item .d-flex.justify-content-between {
  flex-wrap: wrap;
  gap: 6px;
}
.product-item .d-flex.justify-content-between .nav-link {
  font-size: 0.78rem;
  white-space: nowrap;
  padding: 0;
}
.product-item .btn-link {
  text-decoration: none;
}
.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}
.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

/* cart */
.cart .product-qty {
  min-width: 130px;
}

/* floating image */
.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}
@media screen and (max-width:991px) {
  .image-float {
    margin: 0;
  }
}
 /* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}
.post-item .post-meta svg {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {
  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }
  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }
  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }
  .dropdown-menu a {
    padding-left: 0;
  }
  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}
@media screen and (max-width:992px) {
  .product-thumbnail-slider {
    margin-top: 20px;
    height: auto;
  }
}
@media screen and (min-width:992px) {
  .product-thumbnail-slider {
    height: 520px;
  }
}
@media screen and (min-width:1200px) {
  .product-thumbnail-slider {
    height: 740px;
  }
}

/* comentário Nogs o craque (reescrito e responsivo) */

/* 1) NÃO mexer no .img-fluid global (Bootstrap usa em todo o site)
   Aplica o 65% só ao logo do header */
.main-logo img.img-fluid {
  width: 65%;
  height: auto;
}

header .row.border-bottom {
  align-items: center;
}
.footer-menu img.img-fluid {
  width: 65%;
  height: auto;
}

/* 2) Imagem do produto dentro do banner (tag <img> real) */
.banner-product-img {
  max-height: 380px;
  width: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
}

/* Slide com imagem: row ocupa toda a largura e alinha itens em baixo */
.banner-ad .swiper-slide {
  min-height: 320px;
  display: flex;
}
.banner-ad .swiper-slide .banner-content,
.banner-ad .banner-content {
  width: 100%;
}

/* Tamanho do display-4 dentro dos banners: responsivo */
.banner-ad .banner-content .display-4 {
  font-size: clamp(1.4rem, 3vw, 3rem);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .banner-product-img {
    max-height: 200px;
  }
  .banner-ad .swiper-slide {
    min-height: 200px;
  }
  /* Esconder parágrafo no mobile para dar espaço */
  .banner-ad .banner-content .banner-para {
    display: none;
  }
}

@media (max-width: 576px) {
  .banner-product-img {
    max-height: 140px;
  }
  .main-logo img.img-fluid {
    width: 85%;
  }
  .banner-ad .swiper-slide {
    min-height: 160px;
  }
}

/* --- FIX responsivo para o topo (mobile) --- */

/* Não forces alturas iguais no grid em ecrãs pequenos */
@media (max-width: 1140px){
  .banner-blocks{
    grid-template-rows: auto; /* em vez de repeat(4, 1fr) */
  }
}

/* No telemóvel, o slider não pode ter 630px mínimos */
@media (max-width: 576px){
  .banner-ad .swiper-slide{
    min-height: 0;
  }

  /* o padding p-5 é gigante em mobile */
  .banner-content.p-5{
    padding: 1.25rem !important;
  }

  /* opcional: títulos muito grandes no topo */
  .banner-ad.large .banner-content .banner-title,
  .banner-ad.large .banner-content .display-4{
    font-size: 32px;
    line-height: 1.15;
  }
}

.brand-carousel img {
  width: 100%;
  height: 120px; /* ajusta como quiseres */
  object-fit: cover;
}

#latest-blog .image-holder {
  width: 100%;
  aspect-ratio: 1 / 1; /* força quadrado */
  overflow: hidden;
}

#latest-blog .image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filter-sidebar {
    padding-right: 20px;
    border-right: 1px solid #e5e5e5; /* separação suave */
}

/* título */
.filter-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px;
}

/* grupos */
.filter-group {
    margin-bottom: 20px;
}

/* linha separadora suave automática */
.filter-group:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

/* labels */
.filter-label {
    font-size: 13px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

/* subtítulos */
.filter-subtitle {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

/* opções */
.filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 6px;
    cursor: pointer;
}

/* range valores */
.filter-range {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
}

/* hover subtil (efeito moderno) */
.filter-option:hover {
    color: #000;
}

/*----------------------------------------------*/
/* MENU DROPDOWN HOVER STYLES */
/*----------------------------------------------*/

/* Hover no nav-link (Informatica, Eletrodomésticos, etc) */
.nav-item.dropdown > .nav-link:hover {
    color: #FFC43F;
    text-decoration: none;
}

/* Dropdown menu styling - aparecer ao passar rato */
.nav-item.dropdown:hover > .dropdown-menu,
.dropdown-menu.show {
    display: block !important;
    animation: slideDown 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: none;
    border-radius: 8px;
    margin-top: 5px;
}

/* Animação suave */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Itens do dropdown */
.dropdown-menu .dropdown-item {
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    padding: 10px 20px;
}

/* Hover nos itens */
.dropdown-menu .dropdown-item:hover {
    background-color: #FFF9EB;
    color: #FFC43F;
    border-left-color: #FFC43F;
    padding-left: 25px;
}

/* Para desktop - mostrar ao hover */
@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
    }
}

/*----------------------------------------------*/
/* RESPONSIVE IMPROVEMENTS                       */
/*----------------------------------------------*/

/* 1. Product tabs: horizontal scroll on mobile */
@media (max-width: 767px) {
  .product-tabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .product-tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .product-tabs .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.75rem !important;
    padding: 6px 10px;
  }
}

/* 2. Product page: tabs header stacks on mobile */
@media (max-width: 767px) {
  .product-tabs .tabs-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }
  .product-tabs .tabs-header h3 {
    margin-bottom: 0;
  }
}

/* 3. Newsletter section: reduce padding on mobile */
@media (max-width: 767px) {
  .bg-secondary .col-md-6,
  .bg-secondary .col-md-6.p-5 {
    padding: 1.5rem !important;
  }
}

/* 4. Filter sidebar on mobile: no right border, becomes collapsible */
@media (max-width: 767px) {
  .filter-sidebar {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding-right: 0;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
  .filter-toggle-btn {
    display: block;
  }
}
@media (min-width: 768px) {
  .filter-toggle-btn {
    display: none;
  }
}

/* 5. Profile: sidebar spacing on tablet */
@media (max-width: 991px) {
  .profile-sidebar {
    margin-bottom: 2rem;
  }
}

/* 6. Product detail: font sizes on mobile */
@media (max-width: 576px) {
  .product-info-price {
    font-size: 1.5rem;
    font-weight: 700;
  }
  .product-image-slider {
    padding: 1rem !important;
  }
}

/* 7. Section header title + buttons: stack on small screens */
@media (max-width: 576px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
}

/* 8. Blog/events cards: 2 per row on small screens (needs col-sm-6 in HTML) */
@media (max-width: 575px) {
  #latest-blog .col-sm-6 {
    margin-bottom: 1.5rem;
  }
}

/* 9. Footer: consistent vertical spacing on mobile */
@media (max-width: 575px) {
  footer [class*="col-"] {
    margin-bottom: 1.5rem;
  }
}

/* 10. Header: compact gap on small screens */
@media (max-width: 575px) {
  .col-sm-8.col-lg-4 {
    gap: 1rem !important;
  }
}

/* 11. Product table: responsive on mobile */
@media (max-width: 576px) {
  .table-striped {
    font-size: 0.85rem;
  }
}

/*----------------------------------------------*/
/* RESPONSIVE IMPROVEMENTS                       */
/*----------------------------------------------*/

/* 1. Product tabs: horizontal scroll on mobile */
@media (max-width: 767px) {
  .product-tabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .product-tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .product-tabs .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.75rem !important;
    padding: 6px 10px;
  }
}

/* 2. Product page: tabs header stacks on mobile */
@media (max-width: 767px) {
  .product-tabs .tabs-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }
  .product-tabs .tabs-header h3 {
    margin-bottom: 0;
  }
}

/* 3. Newsletter section: reduce padding on mobile */
@media (max-width: 767px) {
  .bg-secondary .col-md-6,
  .bg-secondary .col-md-6.p-5 {
    padding: 1.5rem !important;
  }
}

/* 4. Filter sidebar on mobile: no right border, becomes collapsible */
@media (max-width: 767px) {
  .filter-sidebar {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding-right: 0;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
  .filter-toggle-btn {
    display: block;
  }
}
@media (min-width: 768px) {
  .filter-toggle-btn {
    display: none;
  }
}

/* 5. Profile: sidebar spacing on tablet */
@media (max-width: 991px) {
  .profile-sidebar {
    margin-bottom: 2rem;
  }
}

/* 6. Product detail: font sizes on mobile */
@media (max-width: 576px) {
  .product-info-price {
    font-size: 1.5rem;
    font-weight: 700;
  }
  .product-image-slider {
    padding: 1rem !important;
  }
}

/* 7. Section header title + buttons: stack on small screens */
@media (max-width: 576px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
}

/* 8. Blog/events cards: 2 per row on small screens (needs col-sm-6 in HTML) */
@media (max-width: 575px) {
  #latest-blog .col-sm-6 {
    margin-bottom: 1.5rem;
  }
}

/* 9. Footer: consistent vertical spacing on mobile */
@media (max-width: 575px) {
  footer [class*="col-"] {
    margin-bottom: 1.5rem;
  }
}

/* 10. Header: compact gap on small screens */
@media (max-width: 575px) {
  .col-sm-8.col-lg-4 {
    gap: 1rem !important;
  }
}

/* 11. Product table: responsive on mobile */
@media (max-width: 576px) {
  .table-striped {
    font-size: 0.85rem;
  }
}

.logout-icon {
  font-size: 1.2rem;
  transform: translateY(2px);
}

/* --- Auth Pages & Form Checkboxes migrated from HTML --- */

.auth-body {
  background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.glass-auth-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Soft shadow */
  backdrop-filter: blur(10px); /* Glassmorphism blur effect */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease-in-out;
}

/* Custom Checkbox as requested */
.form-check-input {
  border: 2px solid #000 !important; /* Borda preta e visível */
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Controls inside Auth forms */
.form-control {
  border-radius: 10px;
  padding: 12px 15px;
  border: 1px solid #ced4da;
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
  border-color: #8fb3fb;
}

/* Força da Palavra-passe e Icons */
.pw-strength-container {
  height: 10px;
  background-color: #dee2e6;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

.pw-strength-bar {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
}

#pw-strength-text {
  font-size: 0.85em;
  margin-top: 4px;
  font-weight: 600;
}

.hidden {
  display: none !important;
}

.confirm-icon {
  font-size: 5rem;
  color: #0d6efd;
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* --- Card Base - Estilo Clean & Compacto --- */
/* --- Card Base --- */
.transition-hover {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f2f2f2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    padding-bottom: 20px !important;
}

/* --- Estrela "Mais Bonita" (Dourado Real) --- */
.premium-star {
    font-size: 0.85rem;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

/* --- Efeito Hover --- */
.transition-hover:hover {
    transform: translateY(-10px);
    /* Sombra mais difusa e elegante */
    box-shadow: 0 25px 50px rgba(0,0,0,0.1) !important;
    border-color: #ffc43f;
}

/* Zoom orgânico na imagem */
.product-image {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.transition-hover:hover .product-image {
    transform: scale(1.1) rotate(2deg);
}

/* A estrela pulsa ligeiramente no hover do card */
.transition-hover:hover .premium-star {
    transform: scale(1.2);
}

/* Estilo do Título */
.product-content h3 {
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    transition: color 0.3s ease;
}

.transition-hover:hover h3 {
    color: #ffc43f !important; /* Título muda para a cor da borda no hover */
}

/* Badges de lojas mais compactos e elegantes */
.product-content .badge {
    font-size: 9px !important;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    background-color: #f8f9fa !important;
    color: #555 !important;
    border: 1px solid #e9ecef !important;
    margin-bottom: 4px;
}

/* Efeito ao passar o rato no card (opcional: destacar as lojas) */
.transition-hover:hover .badge {
    border-color: #ffc43f !important;
    color: #2d2d2d !important;
}

/* Cor de destaque suave para a linha mais barata */
.table-success-light {
    background-color: #f8fff9 !important;
}

/* Remover bordas chatas da tabela */
.table > :not(caption) > * > * {
    padding: 1rem 0.5rem;
    border-bottom-width: 1px;
    border-color: #f0f0f0;
}

.table-responsive {
    overflow: hidden; /* Garante que os cantos arredondados funcionam */
}

.store-logo-name {
    color: #333;
    letter-spacing: -0.5px;
}

#favBtn {
    transition: all 0.3s ease;
    background-color: #fff;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#favBtn:hover {
    transform: scale(1.1);
    background-color: #ffefef;
}

#favBtn.active i {
    font-weight: 900; /* Preenche o coração */
    color: #dc3545;
}

/* Ajuste para a tabela não ficar colada ao título */
.comparison-section {
    border-top: 1px solid #eee;
    padding-top: 2rem;
}

/* Estilo das Subcategorias (Pills) */
.btn-sub {
    border-radius: 50px; /* Formato de pílula */
    padding: 6px 18px;
    font-size: 0.85rem;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sub:hover {
    background-color: #f8f9fa;
    border-color: #bbb;
}

.btn-sub.active {
    background-color: #ffc107; /* Cor de destaque (amarelo/laranja) */
    border-color: #ffc107;
    color: #000;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Ajuste para as abas não terem a linha feia do Bootstrap se quiseres algo mais clean */
.product-tabs .nav-tabs .nav-link {
    border: none;
    padding: 10px 15px;
    color: #999;
}

.product-tabs .nav-tabs .nav-link.active {
    color: #000;
    border-bottom: 2px solid #ffc107; /* Linha por baixo da tab ativa */
    background: none;
}

/* Ajustes no price row dos cards para não sobrepor */
.product-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.product-price-row > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.product-price-row .product-price {
    font-size: clamp(1.1rem, 4vw, 1.25rem);
    white-space: nowrap;
}

/* Botão de favorito nos cards */
.floating-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-fav:hover {
    color: #dc3545;
    transform: scale(1.1);
}

.floating-fav.active {
    color: var(--es-danger, #dc3545);
}

.floating-fav.active i {
    font-weight: 900;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.heart-beat {
    animation: heartBeat 0.3s ease-in-out;
}