:root{
    --track-off:#c7c9d1;
    --track-on:#4ade80;
    --thumb:#ffffff;
    --focus:#3b82f6;
    --shadow: 0 2px 8px rgba(0,0,0,.15);

    --bg: #f6f7fb;
      --card: #ffffff;
      --muted: #6b7280;
      --accent: #0ea5a4; /* teal */
      --accent-foreground: #ffffff;
      --shadow: 0 6px 18px rgba(16,24,40,0.08);
      --radius: 12px;
      --gap: 20px;
      --max-width: 1200px;
  }


/* Thin (100) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-Thin.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ExtraLight (200) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-ExtraLight.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-Light.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-Regular.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-Medium.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-SemiBold.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-Bold.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-ExtraBold.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/Montserrat/Montserrat-Black.woff2') format('woff2'),
       url('./assets/Montserrat/Montserrat-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body,h1, h3, p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

body {
  background: #eee;
}


/* Nav */
.wrapper-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 4;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 952px;
    height: 80px;
    margin: auto;
    box-sizing: border-box;
}

@media(max-width: 992px) {
    .nav {
        max-width: auto;
        margin: 0 20px;
        /* saflex-direction: column; */
    }
}


/* Logo */
@media(max-width: 768px) {
  .nav {
        justify-content: center;
    }
    .logo {
        margin: 20px auto 0;
        text-align: center;
    }
}


/* menu */
.wrap{position: relative;max-width: 700px;}
@media(max-width: 992px) {
  .wrap{max-width: 550px;}
}
@media(max-width: 768px) {
    .wrap {
        position: absolute;
        left: 10px;
        right: 10px;
        max-width: 100%;
    }
    .wrap::before {
        content: '';
        position: fixed;
        margin-top: 40px;
        left: 0;
        right: 0;
        height: 50px;
        background: #fff;
    }
}
.menu-shell{position:relative;background:transparent;padding:8px;border-radius:12px}
.btn-arrow-menu{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:8px;border:0;background:#fff;box-shadow:0 6px 18px rgba(16,32,51,0.06);cursor:pointer}
.btn-arrow-menu:active{transform:translateY(-50%) scale(.98)}
.btn-left{left:4px}
.btn-right{right:4px}

.menu{display:flex;gap:12px;overflow-x:hidden;scroll-behavior:smooth;padding:12px 0 12px 0;scroll-snap-type:x mandatory;}
@media(max-width: 768px) {
    .menu {
       padding:0 0 0 0;
       margin: 55px 0 0 0;
    }
    .btn-arrow-menu {
      margin: 27px 0 0 0;
    }
}
.item{flex:0 0 auto;min-width:180px;padding:14px;border-radius:10px;background:#fff;border:1px solid #4ade80;scroll-snap-align:center;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.item h3{margin:0;font-size:15px;color:#386641;}

.hint{font-size:13px;color:var(--muted);margin-top:8px}

/* mobile tweaks */
@media (max-width:520px){
    /* .menu{padding:12px 36px 12px 0} */
    .item{min-width:150px}
}

/* Products */
.container{
      max-width: 952px;
      margin: 110px auto 40px;
      box-sizing: border-box;
    }
@media(max-width: 992px) {
  .container {
      margin: 110px 20px 40px;
  }
}
@media(max-width: 768px) {
    .container {
        margin: 180px 20px 80px;
    }
}

    .container-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 30px 0;
    }

    .container-header h1{
      font-size:20px;
      font-weight:600;
    }

    .container-header .btn-filter-price {
      text-align: right;
        cursor: pointer;
        font-weight: 600;
        line-height: 12px;
        color: #386641;
    }

    .container-header .btn-filter-price {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* GRID: desktop 3 col | tablet 2 col | mobile 1 col */
    .products-grid{
      display:grid;
      gap: 20px;
      grid-template-columns: repeat(3, 1fr);
      padding-bottom: 50px;
    }

    /* Breakpoints */
    @media (max-width: 1024px){
      .products-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px){
      .products-grid{ grid-template-columns: 1fr; padding:0; }
    }

    /* Card */
    .product-card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      transition: transform .18s ease, box-shadow .18s ease;
      min-height: 360px;
      border-radius: 10px;
    }
    .product-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(16,24,40,0.12);
    }

    .media{
      position:relative;
      width:100%;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
    }
    .media img{
      width: auto;
      height:100%;
      margin: auto;
      display:block;
    }

    .badge{
      position:absolute;
      top:10px;
      left:10px;
      background:var(--accent);
      color:var(--accent-foreground);
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:600;
      box-shadow: 0 6px 16px rgba(14,165,164,0.18);
    }

    .card-body{
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      flex:1;
    }

    .title-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .product-title{
      font-size:16px;
      font-weight:700;
      margin:0;
      line-height:1.2;
    }
    .product-desc{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.3;
    }

    .price-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:auto;
      gap:12px;
    }

    .price{
      font-size:18px;
      font-weight:800;
      color:#111827;
    }
    .old-price{
      font-size:13px;
      color:var(--muted);
      text-decoration:line-through;
      margin-left:8px;
      font-weight:600;
    }

    .actions{
      display:flex;
      gap:10px;
      align-items:center;
    }

    .btn{
      width: 83px;
      border:0;
      padding:10px 14px;
      border-radius:10px;
      cursor:pointer;
      font-weight:700;
      font-size:14px;
      text-decoration: none;
    }

    .btn-primary{
      background: #386641;
      color: #fff;
      box-shadow: 0 8px 20px rgba(14,165,164,0.12);
    }
    .btn-ghost{
      background:transparent;
      border:1px solid rgba(15,23,42,0.06);
      color:#0f172a;
    }

    /* small touches */
    .rating{
      font-size:13px;
      color:#f59e0b; /* amber */
      display:inline-block;
      align-items:center;
    }

    .rating-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .rating-item svg path {
      fill: #f59e0b; /* amber */
    }

    .rating-item p{
      font-size: 15px;
      font-weight: 500;
    }

    .rating-item span{
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #aaa;
    }


    /* responsive tweaks for long titles */
    .product-title { display:block; }
    .product-title, .product-desc { word-break:break-word; }

    /* utility */
    .muted { color:var(--muted); font-weight: 500; font-size:16px; }

    /* footer */
    .footer {
      position: fixed;
      padding: 20px;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      background: rgba(0,0,0,.1);
    }

    /* Começa oculto */
  .only-bottom { display: none !important; }

  /* Quando deve aparecer */
  .only-bottom.is-visible { display: block !important; }