/* A mesma margem fluida alinha cabeçalho, destaque, catálogo e rodapé. */
.wrap {
  width: 100%;
  max-width: 2112px;
  padding-inline: clamp(20px, 4vw, 96px);
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(18px, 1.4vw, 28px);
}

.catalog-tools .search-field {
  max-width: 440px;
}

.product-card, .product-body, .hero-copy, .faq-list {
  min-width: 0;
}

@media (min-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 112px);
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .hero h1 {
    font-size: clamp(42px, 3vw, 56px);
    letter-spacing: -.045em;
  }

  .hero-description {
    max-width: 52ch;
    margin-top: 16px;
    font-size: clamp(15px, .9vw, 17px);
    line-height: 1.5;
  }

  .hero-badge {
    margin-bottom: 12px;
  }

  .hero-visual {
    margin-block: 0;
  }

  .hero-image {
    height: clamp(260px, 34vh, 340px);
    aspect-ratio: auto;
    max-height: 340px;
    object-fit: cover;
  }

  .hero-actions {
    margin-top: 18px;
  }

  .visual-tag {
    left: clamp(24px, 2vw, 40px);
    bottom: 14px;
    padding: 10px 16px;
    border-radius: 14px;
  }

  .sample-key {
    font-size: 16px;
    line-height: 1.4;
  }

  .header-search {
    width: clamp(256px, 20vw, 340px);
  }

  .faq-section {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 7vw, 128px);
  }

  .faq-list p {
    max-width: 78ch;
  }

  .access-surface {
    padding: clamp(30px, 2.5vw, 48px);
  }

  .access-surface h2 {
    font-size: clamp(22px, 1.7vw, 30px);
  }
}

@media (max-width: 720px) {
  .wrap {
    padding-inline: 20px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
}

@media (max-width: 450px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Filtros do catálogo na linha de ferramentas, à esquerda. */
.catalog-tools .category-list{justify-content:flex-start;min-width:0;flex-wrap:wrap}.catalog-tools .catalog-meta{margin-left:auto}
@media(max-width:720px){.catalog-tools .catalog-meta{margin-left:0;width:100%}.catalog-tools .category-list{width:100%}}

.catalog-section{padding-top:32px}.catalog-section .section-heading h2{margin-top:0}
@media(max-width:720px){.catalog-section{padding-top:24px}}

/* Categoria legivel e acao de compra explicita nos cards. */
.product-card .card-top{justify-content:flex-start;margin-bottom:14px}
.product-card .category-badge-row{flex:none;padding:8px 3px 0;min-width:0}
.product-card .product-category{display:inline-flex;flex:0 1 auto;max-width:100%;min-width:0;padding:0;border:1px solid #a2fce23d;border-radius:8px;background:linear-gradient(115deg,#14547d 0%,#126f78 52%,#178667 100%);color:#effffc;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.6px;text-transform:uppercase;text-align:left;box-shadow:inset 0 1px 0 #ffffff1a,0 3px 8px #00000020}
.product-card .category-badge-content{display:flex;align-items:center;gap:7px;min-width:0;padding:5px 10px 5px 6px}
.product-card .category-badge-symbol{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border:1px solid #a2fce235;border-radius:5px;background:#ffffff0c;color:#b1ffe8}
.product-card .category-badge-symbol svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.product-card .product-category-label{min-width:0;overflow-wrap:anywhere}

.product-card .card-bottom{align-items:center;flex-wrap:wrap;gap:14px}.product-card .card-bottom>div{flex:1 1 auto}
.product-card .buy-button{width:auto;min-width:116px;height:44px;min-height:44px;border-radius:11px;padding:10px 15px;gap:8px;font-size:14px;white-space:nowrap;flex-shrink:0}
.product-card .buy-button svg{width:17px;height:17px;stroke-width:1.8}
.product-card .buy-button:disabled{background:transparent;color:var(--muted);border-color:var(--line);box-shadow:none;min-width:128px}

/* Controle de fechamento do checkout com alinhamento vetorial e alvo de toque. */
#checkout-dialog .checkout-close{display:inline-flex;align-items:center;justify-content:center;gap:10px;top:16px;right:18px;width:auto;min-width:104px;height:44px;padding:10px 14px;border:1px solid #6be4ca55;border-radius:13px;background:linear-gradient(145deg,#234353,#142c3d);box-shadow:0 4px 14px #04111c44,inset 0 1px 0 #d4fff00c;color:#d7f6ed;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}
#checkout-dialog .checkout-close svg{display:block;width:18px;height:18px;stroke-width:2;stroke-linecap:round;flex-shrink:0}
#checkout-dialog .checkout-close:hover{background:linear-gradient(145deg,#2a554f,#183c40);border-color:#74edce;box-shadow:0 4px 18px #04111c55,0 0 0 3px #57daba12;color:#c9ffe9}
#checkout-dialog .checkout-close:focus-visible{outline:2px solid #9ef8d7;outline-offset:3px}
#checkout-dialog .checkout-close:active{box-shadow:inset 0 2px 5px #04111c44}
@media(max-width:720px){#checkout-dialog .checkout-close{top:14px;right:14px;min-width:96px;height:44px;padding-inline:12px}#checkout-dialog .checkout-summary>.eyebrow{padding-right:110px;min-height:30px}}
@media(prefers-reduced-motion:reduce){#checkout-dialog .checkout-close{transition:none}}

/* A imagem do checkout mantém sua proporção, sem quadro ou fundo. */
#checkout-dialog .checkout-art{position:relative;width:100%;height:auto;aspect-ratio:auto;max-height:none;min-height:0;margin:25px 0 22px;overflow:visible;border:0;border-radius:0;background:transparent}
#checkout-dialog .checkout-art img{position:static;inset:auto;display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;margin:0;border:0;border-radius:0;background:transparent}
@media(max-width:720px){#checkout-dialog .checkout-art{margin-top:18px;margin-bottom:18px}}

/* Aviso de acesso e saldo logo após a ação de criar o pedido. */
#checkout-dialog .checkout-key-warning{display:flex;align-items:flex-start;gap:12px;margin:15px 0 0;padding:16px;border:1px solid #e8bd6859;border-left:3px solid #f5c56b;border-radius:12px;background:#10232f;color:#f3f7fa;text-align:left;font-size:15px;font-weight:500;line-height:1.6;box-shadow:0 4px 16px #06121d18}
#checkout-dialog .checkout-key-warning .warning-emoji{display:block;flex:0 0 26px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:25px;font-style:normal;line-height:1.25;margin-top:2px}

/* Checkout: readable delivery content and a distinct order total. */
#checkout-dialog .delivery-note{display:inline-flex;max-width:100%;margin-top:22px;padding:10px 14px;border:1px solid #70e5bf66;border-left:3px solid #79efc1;border-radius:12px;background:linear-gradient(125deg,#21534c,#163a41);color:#d5ffeb;box-shadow:0 4px 16px #04141c1a;font-size:16px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
#checkout-dialog .delivery-note[hidden]{display:none}
#checkout-dialog #checkout-delivery{white-space:pre-wrap}
#checkout-dialog .summary-total{position:relative;isolation:isolate;gap:10px;margin-top:24px;padding:21px 22px 23px;border:1px solid #7de8bf80;border-radius:18px;background:linear-gradient(135deg,#22564d,#153741 75%);box-shadow:0 12px 28px #03151d30,0 0 26px #61e8b917,inset 0 1px 0 #ceffe51f;color:#e4f6ed}
#checkout-dialog .summary-total::before{content:'';position:absolute;top:0;left:22px;right:22px;height:2px;background:linear-gradient(90deg,transparent,#b5ffda,transparent)}
#checkout-dialog .summary-total>span{font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:#e0f3e9}
#checkout-dialog .summary-total strong{font:clamp(38px,4vw,48px)/1.15 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#b6ffda;text-shadow:0 0 24px #82f5bd24;overflow-wrap:anywhere}
@media(max-width:720px){#checkout-dialog .summary-total{padding:19px 18px 21px}#checkout-dialog .delivery-note{font-size:16px}}