/* ===== TOKENS ===== */ :root{ --bg: #f7f8fa; --surface: #ffffff; --ink: #1f2937; --muted: #6b7280; --brand: #0ea5e9; --brand-ink: #ffffff; --accent: #f59e0b; --danger: #ef4444; --success: #10b981; --ff: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --shadow-sm: 0 6px 18px rgba(0,0,0,.06); --shadow-md: 0 10px 30px rgba(0,0,0,.08); } /* ===== BASE ===== */ body{ background:var(--bg); color:var(--ink); font-family:var(--ff); } /* ===== BOTÕES GENÉRICOS ===== */ .button, .btn, button[type="submit"]{ border-radius: var(--radius-xs); font-weight: 700; } .button--primary, .btn--primary, .shopify-payment-button__button{ background: var(--brand) !important; color: var(--brand-ink) !important; text-transform: uppercase; letter-spacing: .3px; box-shadow: 0 8px 20px rgba(14,165,233,.22); } .button--primary:hover, .btn--primary:hover, .shopify-payment-button__button:hover{ filter: brightness(1.06); } /* ===== “COMPRAR” em página de produto (Dawn/variações) ===== */ .product-form__submit, .product-form__buttons .button{ font-size: 18px; border-radius: var(--radius-xs); } /* ===== CARDS DE PRODUTO (coleções) ===== */ .card, .card-wrapper{ border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; } .card__media img{ object-fit: cover; } price-money, .price-item--regular{ color:#9ca3af; } .price-item--sale{ font-weight:800; color:var(--ink); } /* ===== INPUTS (newsletter/contato) ===== */ input[type="text"], input[type="email"], input[type="tel"], select, textarea{ background:#f4f6f8; border:1px solid #e5e7eb; color:var(--ink); border-radius: var(--radius-xs); padding: 12px 14px; } input:focus, select:focus, textarea:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,165,233,.15); background:#fff; } /* ===== BLOCO DE AVALIAÇÕES (genérico) ===== */ .reviews{ margin: 20px 0 36px; } .reviews__wrap{ background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 20px; } .reviews__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .reviews__title{ font-weight:800; font-size:20px; } .reviews__meta{ color:var(--muted); font-size:12px; } .reviews__grid{ display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0,1fr)); } @media (max-width:920px){ .reviews__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .reviews__grid{ grid-template-columns:1fr; } } .review{ display:grid; grid-template-columns:56px 1fr; column-gap:12px; row-gap:6px; grid-template-areas: "avatar head" "avatar body"; background:#f9fafb; border-radius:var(--radius-sm); padding:12px; box-shadow:var(--shadow-sm); } .review__avatar img{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.06); } .review__name{ font-weight:700; font-size:14px; } .review__badge{ font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--success); background:rgba(16,185,129,.12); padding:3px 8px; border-radius:999px; } .review__body{ color:#374151; font-size:14px; } .stars{ --rating:5; position:relative; display:inline-block; font-size:14px; line-height:1; } .stars::before{ content:"★★★★★"; letter-spacing:.15em; background:linear-gradient(90deg, var(--accent) calc(var(--rating)/5*100%), #e5e7eb calc(var(--rating)/5*100%)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stars::after{ content:"★★★★★"; position:absolute; inset:0; color:#e5e7eb; opacity:.35; }