* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    :root {
      --fundo: #fff8f5;
      --texto: #241b1b;
      --marrom: #7a4e3a;
      --marrom-escuro: #3a2520;
      --rose: #d9a7a0;
      --rose-claro: #f2d8d3;
      --card: #ffffff;
      --cinza: #6b5b56;
      --whatsapp: #25d366;
      --whatsapp-hover: #1ebe5d;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--fundo);
      color: var(--texto);
    }

    a {
      color: inherit;
    }

    .barra-topo {
      background: var(--marrom-escuro);
      color: #fff;
      text-align: center;
      padding: 9px 12px;
      font-size: 14px;
    }

    header {
      min-height: 440px;
      position: relative;
      background: linear-gradient(rgba(36, 27, 27, 0.72), rgba(36, 27, 27, 0.72));
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 34px 16px;
      overflow: hidden;
    }

    header::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../logo-caroll-closet1.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 760px auto;
      opacity: 0.24;
      z-index: 0;
    }

    .hero {
      position: relative;
      z-index: 1;
      max-width: 780px;
    }

    .logo-marca {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid rgba(255,255,255,0.8);
      background: #d9f2f0;
      margin-bottom: 18px;
    }

    .selo {
      display: inline-block;
      border: 1px solid rgba(255,255,255,0.65);
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 13px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .hero h1 {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: clamp(42px, 8vw, 82px);
      font-weight: 400;
      line-height: 1;
      margin-bottom: 14px;
    }

    .hero p {
      font-size: 18px;
      color: #f8eeee;
      margin-bottom: 26px;
      line-height: 1.5;
    }

    .botoes-hero {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-primario,
    .btn-secundario {
      display: inline-block;
      text-decoration: none;
      padding: 14px 24px;
      border-radius: 999px;
      font-weight: bold;
      transition: 0.2s;
    }

    .btn-primario {
      background: white;
      color: var(--marrom);
    }

    .btn-secundario {
      background: transparent;
      color: white;
      border: 1px solid rgba(255,255,255,0.7);
    }

    .btn-primario:hover,
    .btn-secundario:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(0,0,0,0.22);
    }

    .container {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 42px 16px 58px;
    }

    .frase-marca {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 34px;
    }

    .frase-marca h2 {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 34px;
      font-weight: 400;
      margin-bottom: 10px;
    }

    .frase-marca p {
      color: var(--cinza);
      font-size: 16px;
      line-height: 1.6;
    }

    .info-loja {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 34px;
    }

    .info-card {
      background: white;
      padding: 18px;
      border-radius: 18px;
      box-shadow: 0 8px 24px rgba(122, 78, 58, 0.10);
      text-align: center;
    }

    .info-card strong {
      display: block;
      margin-bottom: 6px;
      color: var(--marrom);
    }

    .info-card span {
      color: var(--cinza);
      font-size: 14px;
    }

    .topo-vitrine {
      display: flex;
      gap: 14px;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .topo-vitrine h2 {
      font-size: 24px;
      font-weight: 500;
    }

    .busca {
      width: 100%;
      margin-bottom: 16px;
    }

    .busca input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--rose);
      border-radius: 14px;
      font-size: 15px;
      background: white;
      outline: none;
    }

    .busca input:focus {
      border-color: var(--marrom);
      box-shadow: 0 0 0 3px rgba(122, 78, 58, 0.12);
    }

    .filtros {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    .filtros button {
      border: 1px solid var(--rose);
      background: white;
      color: var(--marrom);
      padding: 10px 15px;
      border-radius: 999px;
      cursor: pointer;
      transition: 0.2s;
      font-weight: 600;
      font-size: 14px;
    }

    .filtros button:hover,
    .filtros button.ativo {
      background: var(--marrom);
      color: white;
      border-color: var(--marrom);
    }

    .grid-produtos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
      gap: 22px;
    }

    .produto {
      background: var(--card);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(122, 78, 58, 0.12);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
    }

    .produto:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 38px rgba(122, 78, 58, 0.18);
    }

    .produto img {
      width: 100%;
      height: 315px;
      object-fit: cover;
      background: #eee;
      display: block;
    }

    .tag-estoque {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(255,255,255,0.94);
      color: var(--marrom);
      padding: 7px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: bold;
    }

    .produto-info {
      padding: 17px;
    }

    .categoria {
      display: inline-block;
      font-size: 12px;
      background: var(--rose-claro);
      padding: 6px 10px;
      border-radius: 999px;
      margin-bottom: 11px;
      color: var(--marrom);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: bold;
    }

    .produto h3 {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .descricao {
      color: var(--cinza);
      font-size: 14px;
      line-height: 1.45;
      margin-bottom: 12px;
      min-height: 42px;
    }

    .detalhes {
      font-size: 14px;
      color: #4d403c;
      margin-bottom: 13px;
      line-height: 1.55;
    }

    .preco {
      font-size: 23px;
      font-weight: bold;
      margin-bottom: 14px;
      color: var(--marrom);
    }

    .btn-whatsapp {
      display: block;
      width: 100%;
      text-align: center;
      background: var(--whatsapp);
      color: white;
      text-decoration: none;
      padding: 13px;
      border-radius: 14px;
      font-weight: bold;
      transition: 0.2s;
    }

    .btn-whatsapp:hover {
      background: var(--whatsapp-hover);
      transform: translateY(-1px);
    }

    .sem-produtos {
      background: white;
      padding: 28px;
      border-radius: 18px;
      text-align: center;
      color: var(--cinza);
      grid-column: 1 / -1;
      box-shadow: 0 8px 24px rgba(122, 78, 58, 0.10);
    }

    .botao-flutuante-whatsapp {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 20;
      background: var(--whatsapp);
      color: white;
      text-decoration: none;
      padding: 14px 18px;
      border-radius: 999px;
      font-weight: bold;
      box-shadow: 0 8px 24px rgba(0,0,0,0.22);
      transition: 0.2s;
    }

    .botao-flutuante-whatsapp:hover {
      background: var(--whatsapp-hover);
      transform: translateY(-2px);
    }

    footer {
      text-align: center;
      padding: 24px 16px;
      background: var(--marrom-escuro);
      color: #e8d6d2;
      font-size: 14px;
      line-height: 1.7;
    }

    footer strong {
      color: white;
    }

    @media (max-width: 640px) {
      header {
        min-height: 390px;
      }

      .logo-marca {
        width: 96px;
        height: 96px;
      }

      .hero p {
        font-size: 16px;
      }

      .frase-marca h2 {
        font-size: 28px;
      }

      .produto img {
        height: 340px;
      }

      .botao-flutuante-whatsapp {
        left: 14px;
        right: 14px;
        text-align: center;
      }
    }