/* css/storefront.css — Vitrine: busca, categorias, badges, WhatsApp, como funciona, meus pedidos */
  .search-wrap{
    display:block;max-width:1180px;margin:0 auto 28px;padding:0 24px;
  }
  .search-box{
    display:flex;align-items:center;gap:9px;
    background:var(--surface);border:1px solid var(--line);border-radius:100px;
    padding:11px 16px;box-shadow:0 1px 2px rgba(23,24,27,0.04);
  }
  .search-box svg{width:17px;height:17px;flex-shrink:0;color:var(--ink-soft);}
  .search-box input{border:none;outline:none;background:none;font-family:var(--body);font-size:0.9rem;width:100%;color:var(--ink);}
  .search-box input::placeholder{color:#9A9DA5;}

  /* ===== CATEGORIAS EM ÍCONE CIRCULAR (agora padrão em qualquer tela) ===== */
  .cat-icons{
    display:flex;gap:20px;max-width:1180px;margin:0 auto;padding:0 24px 28px;
    justify-content:center;flex-wrap:wrap;
  }
  .cat-icon-btn{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0;width:64px;cursor:pointer;}
  .cat-icon-circle{
    width:56px;height:56px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;position:relative;
  }
  .cat-icon-count{
    position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:100px;
    background:var(--accent);color:#fff;font-family:var(--mono);font-size:0.62rem;font-weight:600;
    display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg);
  }
  .cat-icon-btn.active .cat-icon-count{background:var(--ink);}
  .cat-icon-circle svg{width:24px;height:24px;color:var(--ink);}
  .cat-icon-btn.active .cat-icon-circle{background:var(--ink);border-color:var(--ink);}
  .cat-icon-btn.active .cat-icon-circle svg{color:#fff;}
  .cat-icon-label{font-size:0.72rem;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.2;}
  .cat-icon-btn.active .cat-icon-label{color:var(--ink);}

  /* ===== BADGES / FAVORITO no card ===== */
  .card-tag{display:none;}
  .fav-toggle{
    position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,0.9);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);z-index:2;
  }
  .fav-toggle svg{width:17px;height:17px;}
  .fav-toggle.active{color:#E0483F;}
  .fav-toggle:hover{color:#E0483F;}
  .fav-toggle.pdp-fav{position:static;display:inline-flex;width:34px;height:34px;background:var(--bg);box-shadow:none;border:1px solid var(--line);vertical-align:middle;margin-left:8px;}

  /* ===== BOTÃO FLUTUANTE WHATSAPP ===== */
  .fab-wpp{
    display:flex;position:fixed;right:18px;bottom:18px;z-index:45;
    width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;
    align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(37,211,102,0.45);
  }
  .fab-wpp svg{width:26px;height:26px;}

  @media (max-width:860px){
    .hero{grid-template-columns:1fr;padding-top:28px;gap:32px;}
    .hero-visual{height:260px;}
    .grid{grid-template-columns:repeat(2,1fr);gap:14px;}
    .footer-inner{grid-template-columns:1fr;gap:32px;}
    nav{display:none;}
    .burger{display:flex;}
    .header-inner{padding:14px 16px;}
    .hero{padding-left:16px;padding-right:16px;}
    .filters{display:none;}
    .cat-icons{padding:20px 16px 28px;}
    .section-title{padding:0 16px;}
    .catalog-wrap{padding:0 16px 60px;}
  }
  @media (max-width:640px){
    /* header vira topbar de app: logo em badge + carrinho como ícone */
    .header-inner{padding:12px 16px;}
    .logo{gap:8px;font-size:0.98rem;}
    .logo-mark{width:32px;height:32px;}
    .cart-btn{padding:0;width:38px;height:38px;border-radius:50%;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:0;}
    .cart-btn::before{content:'';display:block;width:17px;height:17px;flex-shrink:0;
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 6h15l-1.5 9h-12z'/%3E%3Ccircle cx='9' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 6h15l-1.5 9h-12z'/%3E%3Ccircle cx='9' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
      background:var(--ink);}
    .cart-badge{position:absolute;top:-4px;right:-4px;font-size:0.68rem;}

    /* hero vira banner de app, com texto sobreposto (estilo "foto cheia" com busca flutuante) */
    .hero{
      display:block;padding:0;position:relative;
    }
    .hero-visual{height:260px;border-radius:0;order:0;}
    .hero > div:first-child{display:none;}

    /* busca flutuante sobrepondo a borda inferior do banner */
    .search-wrap{
      display:block;max-width:1180px;margin:-26px auto 0;padding:0 16px;
      position:relative;z-index:2;
    }
    .search-box{box-shadow:0 10px 24px rgba(23,24,27,0.16);padding:13px 16px;}

    /* título de cada categoria acima da grade, igual ao desktop */
    .section-title{padding:22px 16px 0;font-size:1.2rem;}
    .cat-head{display:flex;padding:0 2px;margin-bottom:12px;}
    .cat-head h3{font-size:1.05rem;}
    .cat-section{margin-bottom:28px;}

    .grid{grid-template-columns:repeat(2,1fr);gap:14px;}

    /* cards em estilo app: foto grande, corpo simples, botão e preço em vermelho */
    .card{border-radius:18px;border:1px solid var(--line);box-shadow:0 2px 10px rgba(23,24,27,0.05);}
    .card-img{position:relative;height:auto;aspect-ratio:1 / 1;}
    .card-body{padding:14px;gap:8px;}
    .card h3{font-size:0.94rem;font-weight:800;line-height:1.28;}

    .from-label{font-size:0.74rem;color:#8A8D93;}
    .price-block{margin-top:2px;gap:1px;}
    .price{font-size:1.28rem;color:var(--accent-ink);font-weight:800;white-space:nowrap;}
    .price small{color:#8A8D93;}
    .lead-badge{font-size:0.66rem;padding:4px 8px 4px 6px;gap:3px;}
    .lead-badge svg{width:11px;height:11px;}
    .add-btn{padding:13px 8px;font-size:0.82rem;font-weight:800;border-radius:100px;margin-top:6px;
      background:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .add-btn:hover{opacity:0.9;}

    .fab-wpp{display:flex;}
  }
  @media (max-width:520px){
    .swatch{width:26px;height:26px;}
    .drawer-items{padding:14px 16px;}
    .drawer-foot{padding:16px;}
    .footer-inner{padding:0;}
    footer{padding:44px 16px 28px;}
    .qty-row button{width:28px;height:28px;}
    .remove-btn{width:28px;height:28px;}
  }
  @media (max-width:380px){
    .hero-ctas{flex-direction:column;}
    .btn-primary, .btn-ghost{text-align:center;}
    .card-body{padding:12px;}
    .card h3{font-size:0.88rem;}
    .price{font-size:1.12rem;}
    .add-btn{font-size:0.76rem;padding:12px 6px;}
  }

  /* ===== SEÇÃO "COMO FUNCIONA" ===== */
  .how{max-width:1180px;margin:0 auto;padding:8px 24px 88px;scroll-margin-top:80px;}
  .how-head{text-align:center;max-width:560px;margin:0 auto;}
  .how-head .eyebrow{margin-bottom:16px;}
  .how-head h2{font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-0.015em;line-height:1.15;margin-bottom:10px;}
  .how-head p{color:var(--ink-soft);font-size:1.02rem;}
  .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
  .how-step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;}
  .how-art{position:relative;height:172px;background-color:var(--accent-soft);border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .how-art svg{width:82%;max-width:230px;height:auto;}
  .how-num{position:absolute;top:14px;left:14px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono);font-size:0.8rem;font-weight:600;display:flex;align-items:center;justify-content:center;}
  .how-body{padding:20px 22px 24px;}
  .how-body h3{font-family:var(--display);font-size:1.1rem;font-weight:700;margin-bottom:6px;}
  .how-body p{color:var(--ink-soft);font-size:0.94rem;}
  .how-step:not(:last-child)::after{
    content:'›';position:absolute;top:73px;right:-23px;z-index:2;width:26px;height:26px;border-radius:50%;
    background:var(--surface);border:1px solid var(--line);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;padding-bottom:2px;
  }
  .how-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px;}
  /* ilustrações (SVG inline) */
  .ill-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .ill-white{fill:#fff;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;}
  .ill-acc{fill:var(--accent);}
  .ill-acc-soft{fill:#8DB4F8;}
  .ill-ink{fill:var(--ink);}
  @media (max-width:860px){
    .how-steps{grid-template-columns:1fr;gap:16px;max-width:520px;margin-left:auto;margin-right:auto;}
    .how-step:not(:last-child)::after{display:none;}
    .how-art{height:150px;}
  }
  @media (max-width:640px){
    .how{padding:8px 16px 64px;}
    .how-head h2{font-size:1.5rem;}
  }

  /* ===== PÁGINA "MEUS PEDIDOS" ===== */
  .orders-page .wrap{max-width:980px;margin:0 auto;padding:22px 24px 80px;min-height:60vh;}
  .orders-page .back-link{display:inline-flex;align-items:center;gap:6px;font-size:0.88rem;font-weight:600;color:var(--ink-soft);margin-bottom:20px;}
  .orders-page .back-link:hover{color:var(--ink);}
  .orders-title{font-family:var(--display);font-size:1.8rem;font-weight:800;letter-spacing:-0.015em;line-height:1.15;}
  .orders-sub{color:var(--ink-soft);font-size:0.94rem;margin:6px 0 24px;word-break:break-word;}
  .orders-page .orders-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
  .orders-page .order-card{padding:18px 20px;border-radius:var(--radius);}
  .orders-page .orders-empty{padding:48px 0;}
  .orders-empty-cta{display:flex;justify-content:center;margin-top:-20px;margin-bottom:8px;}
  .orders-lookup{margin-top:36px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);max-width:520px;}
  .orders-lookup h3{font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:4px;}
  .orders-lookup p{color:var(--ink-soft);font-size:0.9rem;margin-bottom:14px;}
  .orders-lookup-row{display:flex;gap:8px;flex-wrap:wrap;}
  .orders-lookup-row input{flex:1 1 180px;border:1px solid var(--line);border-radius:100px;padding:12px 16px;font-size:0.92rem;font-family:var(--body);}
  .orders-lookup-row input:focus{outline:2px solid var(--accent);outline-offset:1px;}
  .orders-lookup-row .btn-primary{padding:12px 22px;}
  .orders-lookup-msg{color:var(--ink-soft);font-size:0.86rem;margin-top:10px;}
  .orders-login-hint{margin-top:18px;font-size:0.9rem;color:var(--ink-soft);}
  .orders-login-hint button{font-weight:700;color:var(--accent-ink);text-decoration:underline;}
  @media (max-width:640px){
    .orders-page .wrap{padding:18px 16px 64px;}
    .orders-title{font-size:1.5rem;}
    .orders-page .orders-list{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
  }
  /* ===== PÁGINA DE PRODUTO (abre em outra aba, mesmo arquivo, via ?id=) ===== */