/** Shopify CDN: Minification failed Line 2796:1 Unexpected "gba(" Line 2803:0 Unexpected "}" Line 4836:0 Unexpected "(" **/ /*================================================================== ███████╗██╗ ██╗ ██████╗ ██████╗ ████████╗ ██████╗ ██████╗ ██╗ ██╔════╝██║ ██║██╔═══██╗██╔══██╗╚══██╔══╝██╔═══██╗██╔═══██╗██║ ███████╗███████║██║ ██║██████╔╝ ██║ ██║ ██║██║ ██║██║ ╚════██║██╔══██║██║ ██║██╔═══╝ ██║ ██║ ██║██║ ██║██║ ███████║██║ ██║╚██████╔╝██║ ██║ ╚██████╔╝╚██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝ SHOPTOOL DESIGN SYSTEM Versão 1.0 Este arquivo concentra TODOS os estilos personalizados da Shoptool. Nunca editar os arquivos originais do tema quando a alteração puder ser feita aqui. ==================================================================*/ /*================================================== ÍNDICE ==================================================== 1. VARIÁVEIS 2. LAYOUT 3. TIPOGRAFIA 4. BOTÕES 5. CARDS 6. SEÇÕES 7. COMPONENTES 7.1 Hero Banner 7.2 Trust Section 7.3 Storytelling 7.4 Collections 7.5 Product Banner 7.6 WhatsApp CTA 7.7 FAQ 7.8 Footer CTA 7.9 Newsletter 7.10 Product Badges 8. PRODUTO 9. HEADER 10. FOOTER 11. ANIMAÇÕES 12. UTILITÁRIOS 13. RESPONSIVO ==================================================*/ /*================================================== 1. VARIÁVEIS ==================================================*/ :root{ /* CORES */ --st-color-primary:#ff6a00; --st-color-primary-light:#ff8c00; --st-color-dark:#111111; --st-color-black:#0f0f0f; --st-color-white:#ffffff; --st-color-text:#111111; --st-color-text-muted:rgba(17,17,17,.68); --st-color-text-inverse:#ffffff; --st-color-text-inverse-muted:rgba(255,255,255,.68); --st-color-border:rgba(17,17,17,.08); --st-color-border-dark:rgba(255,255,255,.08); /* ESPAÇAMENTOS */ --st-space-xs:8px; --st-space-sm:12px; --st-space-md:16px; --st-space-lg:24px; --st-space-xl:32px; --st-space-2xl:40px; /* RAIOS */ --st-radius-sm:12px; --st-radius-md:16px; --st-radius-lg:20px; --st-radius-xl:24px; /* SOMBRAS */ --st-shadow-sm:0 8px 22px rgba(255,106,0,.24); --st-shadow-md:0 12px 30px rgba(17,17,17,.06); --st-shadow-lg:0 18px 45px rgba(17,17,17,.10); --st-shadow-orange:0 18px 45px rgba(255,106,0,.12); /* TIPOGRAFIA */ --st-font-size-xs:13px; --st-font-size-sm:15px; --st-font-size-md:17px; --st-font-size-lg:20px; --st-font-size-xl:32px; --st-font-size-2xl:42px; /* TRANSIÇÕES */ --st-transition:all .30s ease; } /*================================================== 2. LAYOUT ==================================================*/ .shoptool-container{ width:calc(100% - var(--st-space-xl)); max-width:1200px; margin-left:auto; margin-right:auto; box-sizing:border-box; } .st-container{ width:calc(100% - var(--st-space-xl)); max-width:1200px; margin-left:auto; margin-right:auto; box-sizing:border-box; } .st-grid{ display:grid; gap:var(--st-space-lg); width:100%; box-sizing:border-box; } .st-grid-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); } /*================================================== 3. TIPOGRAFIA ==================================================*/ .st-section-header{ max-width:720px; margin:0 auto 36px; text-align:center; } .st-section-eyebrow{ display:inline-flex; margin:0 0 var(--st-space-sm); color:var(--st-color-primary); font-size:var(--st-font-size-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .st-section-title{ margin:0; color:var(--st-color-text); font-size:var(--st-font-size-2xl); font-weight:900; line-height:1.08; letter-spacing:-.04em; } .st-section-text{ max-width:620px; margin:var(--st-space-md) auto 0; color:var(--st-color-text-muted); font-size:var(--st-font-size-md); line-height:1.6; } /*================================================== 4. BOTÕES ==================================================*/ .shoptool-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:var(--st-space-md) 30px; background: linear-gradient( 135deg, var(--st-color-primary), var(--st-color-primary-light)); color:var(--st-color-white); font-size:var(--st-font-size-sm); font-weight:700; text-decoration:none; border:none; border-radius:var(--st-radius-md); cursor:pointer; transition: transform .30s ease, box-shadow .30s ease, filter .30s ease; box-shadow: 0 12px 30px rgba(255,106,0,.25); position:relative; overflow:hidden; } .shoptool-btn::before{ content:""; position:absolute; top:0; left:-120%; width:80%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25), transparent); transition:.7s; } .shoptool-btn:hover{ transform:translateY(-3px); box-shadow: 0 18px 40px rgba(255,106,0,.35); filter:brightness(1.03); } .shoptool-btn:hover::before{ left:140%; } .shoptool-btn:active{ transform:scale(.98); } .shoptool-btn-dark{ background:var(--st-color-dark); border:1px solid var(--st-color-border-dark); box-shadow:none; } .shoptool-btn-dark:hover{ border-color:var(--st-color-primary); } /*================================================== 5. CARDS ==================================================*/ .shoptool-card-demo{ padding:40px 0; } .st-premium-card-v1{ display:block; width:100%; width:100%; min-height:auto; height:auto; background:#ffffff; border:1px solid rgba(17,17,17,.08); border-radius:20px; padding:24px; box-shadow: 0 12px 30px rgba(17,17,17,.06); box-sizing:border-box; overflow:visible; position:relative; transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease; } .st-card-test-area{ padding:var(--st-space-2xl) 0; background:var(--st-color-white); } .st-premium-card-v1{ display:block; width:100%; min-height:auto; height:auto; background:var(--st-color-white); border:1px solid var(--st-color-border); border-radius:var(--st-radius-lg); padding:var(--st-space-lg); box-shadow:var(--st-shadow-md); box-sizing:border-box; overflow:visible; position:relative; transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease; } .st-premium-card-v1:hover{ transform:translateY(-4px); box-shadow:var(--st-shadow-lg); border-color:rgba(255,106,0,.35); } .st-premium-card-v1__icon{ width:52px; height:52px; border-radius:var(--st-radius-md); background: linear-gradient( 135deg, var(--st-color-primary), var(--st-color-primary-light)); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:18px; box-shadow:var(--st-shadow-sm); } .st-premium-card-v1__title{ display:block; margin:0 0 10px; padding:0; color:var(--st-color-text); font-size:var(--st-font-size-lg); font-weight:800; line-height:1.25; visibility:visible; opacity:1; } .st-premium-card-v1__text{ display:block; margin:0; padding:0; color:var(--st-color-text-muted); font-size:var(--st-font-size-sm); font-weight:400; line-height:1.55; visibility:visible; opacity:1; } /*================================================== 6. SEÇÕES ==================================================*/ /*================================================== 7. COMPONENTES ==================================================*/ /*------------------------------- 7.1 HERO BANNER --------------------------------*/ /*------------------------------- 7.1 HERO BANNER PREMIUM --------------------------------*/ .st-hero { padding: 28px 0 42px; } /* Estrutura geral */ .st-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr); align-items: center; gap: clamp(40px, 5vw, 76px); min-height: 540px; padding: clamp(42px, 5vw, 68px); box-sizing: border-box; overflow: hidden; background: radial-gradient( circle at 88% 15%, rgba(255, 106, 0, 0.22), transparent 32% ), linear-gradient( 135deg, #111111 0%, #181818 55%, #202020 100% ); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; box-shadow: 0 28px 70px rgba(17, 17, 17, 0.16); } /* Elemento decorativo */ .st-hero__grid::before { content: ""; position: absolute; top: -160px; right: -130px; width: 390px; height: 390px; background: rgba(255, 106, 0, 0.08); border-radius: 50%; filter: blur(12px); pointer-events: none; } /* ========================================================= CONTEÚDO ========================================================= */ .st-hero__content { position: relative; z-index: 2; max-width: 690px; } /* Etiqueta superior */ .st-hero__eyebrow { display: inline-flex; align-items: center; margin: 0 0 18px; padding: 8px 12px; background: rgba(255, 106, 0, 0.1); color: #ff8a32; border: 1px solid rgba(255, 106, 0, 0.25); border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } /* Título */ .st-hero__title { max-width: 760px; margin: 0; color: #ffffff; font-size: clamp(40px, 4.8vw, 66px); font-weight: 900; line-height: 1.03; letter-spacing: -0.045em; } /* Descrição */ .st-hero__text { max-width: 590px; margin: 22px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 16px; font-weight: 400; line-height: 1.65; } /* ========================================================= BOTÕES ========================================================= */ .st-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 30px; } /* Botão principal */ .st-hero__primary-button { min-height: 54px; padding-right: 24px; padding-left: 24px; border-radius: 13px; box-shadow: 0 8px 22px rgba(255, 106, 0, 0.24); } /* Seta do botão */ .st-hero__primary-button span { margin-left: 5px; transition: transform 180ms ease; } @media (hover: hover) { .st-hero__primary-button:hover span { transform: translateX(4px); } } /* Botão secundário */ .st-hero__secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; box-sizing: border-box; background: rgba(255, 255, 255, 0.045); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 13px; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; } @media (hover: hover) { .st-hero__secondary-button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.075); color: #ffffff; border-color: rgba(255, 106, 0, 0.55); } } /* ========================================================= DIFERENCIAIS ========================================================= */ .st-hero__highlights { display: flex; align-items: center; flex-wrap: wrap; gap: 13px 22px; margin: 28px 0 0; padding: 0; list-style: none; } .st-hero__highlight { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.72); font-size: 11.5px; font-weight: 650; line-height: 1.4; } /* Círculo de confirmação */ .st-hero__highlight > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; background: linear-gradient( 135deg, #ff6a00, #ff8a32 ); color: #ffffff; border-radius: 50%; font-size: 11px; font-weight: 900; box-shadow: 0 5px 14px rgba(255, 106, 0, 0.22); } /* ========================================================= IMAGEM ========================================================= */ .st-hero__visual { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 0; } /* Cartão visual */ .st-hero__visual-card { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; margin: 0; box-sizing: border-box; overflow: hidden; background: #242424; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32), 0 12px 35px rgba(255, 106, 0, 0.09); transform: rotate(1.5deg); transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } /* Imagem */ .st-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 500ms ease; } /* Degradê para leitura da legenda */ .st-hero__visual-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(17, 17, 17, 0.04) 35%, rgba(17, 17, 17, 0.84) 100% ); pointer-events: none; } /* Selo sobre a imagem */ .st-hero__visual-badge { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; background: rgba(17, 17, 17, 0.76); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; backdrop-filter: blur(8px); font-size: 10.5px; font-weight: 750; line-height: 1; letter-spacing: 0.045em; text-transform: uppercase; } /* Ponto laranja do selo */ .st-hero__visual-badge > span { display: block; width: 7px; height: 7px; background: #ff6a00; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.16); } /* Legenda sobre a imagem */ .st-hero__visual-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 26px 24px 24px; } /* Pequeno título da legenda */ .st-hero__visual-label { margin: 0 0 7px; color: #ff8a32; font-size: 10.5px; font-weight: 850; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } /* Mensagem da legenda */ .st-hero__visual-title { max-width: 360px; margin: 0; color: #ffffff; font-size: 23px; font-weight: 800; line-height: 1.18; letter-spacing: -0.025em; } /* Interação no desktop */ @media (hover: hover) { .st-hero__visual-card:hover { transform: rotate(0deg) translateY(-5px); border-color: rgba(255, 106, 0, 0.5); box-shadow: 0 38px 85px rgba(0, 0, 0, 0.36), 0 14px 38px rgba(255, 106, 0, 0.13); } .st-hero__visual-card:hover .st-hero__image { transform: scale(1.035); } } /* ========================================================= TABLETS ========================================================= */ @media screen and (max-width: 990px) { .st-hero__grid { grid-template-columns: 1fr; gap: 38px; min-height: auto; padding: 48px; } .st-hero__content { max-width: 760px; } .st-hero__visual-card { max-width: none; aspect-ratio: 16 / 10; transform: none; } .st-hero__image { object-position: center 58%; } } /* ========================================================= CELULAR ========================================================= */ @media screen and (max-width: 640px) { .st-hero { padding: 16px 0 30px; } .st-hero__grid { gap: 30px; padding: 34px 22px 22px; border-radius: 18px; } .st-hero__eyebrow { margin-bottom: 15px; font-size: 9.5px; } .st-hero__title { font-size: 36px; line-height: 1.06; letter-spacing: -0.038em; } .st-hero__text { margin-top: 17px; font-size: 14px; line-height: 1.6; } .st-hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 23px; } .st-hero__primary-button, .st-hero__secondary-button { width: 100%; min-height: 51px; box-sizing: border-box; } .st-hero__highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 22px; } .st-hero__highlight:last-child { grid-column: 1 / -1; } .st-hero__visual-card { aspect-ratio: 4 / 3; border-radius: 15px; } .st-hero__visual-badge { top: 12px; left: 12px; padding: 7px 9px; font-size: 9px; } .st-hero__visual-caption { padding: 20px 16px 16px; } .st-hero__visual-label { margin-bottom: 5px; font-size: 9px; } .st-hero__visual-title { max-width: 290px; font-size: 17px; } } /*------------------------------- 7.2 TRUST SECTION --------------------------------*/ .shoptool-trust-section { width: calc(100% - var(--st-space-xl)); max-width: 1600px; margin: 20px auto; background: var(--st-color-black); border-radius: var(--st-radius-xl); padding: 28px 18px; box-sizing: border-box; } .shoptool-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .shoptool-trust-item { display: flex; align-items: center; gap: 14px; padding: var(--st-space-lg); border-radius: var(--st-radius-lg); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); transition: var(--st-transition); cursor: default; } .shoptool-trust-item:hover { transform: translateY(-3px); border-color: rgba(255,106,0,.45); background: rgba(255,255,255,.05); box-shadow: 0 10px 25px rgba(255,106,0,.12); } .shoptool-trust-icon { width: 52px; height: 52px; min-width: 52px; border-radius: var(--st-radius-md); background: linear-gradient( 135deg, var(--st-color-primary), var(--st-color-primary-light) ); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: var(--st-shadow-sm); transition: transform .3s ease; } .shoptool-trust-item:hover .shoptool-trust-icon { transform: scale(1.06); } .shoptool-trust-text h3 { margin: 0; color: var(--st-color-text-inverse); font-size: var(--st-font-size-sm); font-weight: 700; line-height: 1.25; } .shoptool-trust-text p { margin: 4px 0 0; color: var(--st-color-text-inverse-muted); font-size: var(--st-font-size-xs); line-height: 1.45; } @media (max-width: 990px) { .shoptool-trust-section { width: calc(100% - var(--st-space-xl)); } .shoptool-trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .shoptool-trust-section { width: calc(100% - var(--st-space-lg)); padding: var(--st-space-md); border-radius: var(--st-radius-lg); margin: var(--st-space-md) auto; } .shoptool-trust-grid { grid-template-columns: 1fr; gap: var(--st-space-sm); } .shoptool-trust-item { padding: var(--st-space-md); border-radius: var(--st-radius-md); } .shoptool-trust-icon { width: 46px; height: 46px; min-width: 46px; font-size: 20px; } .shoptool-trust-text h3 { font-size: 14px; } .shoptool-trust-text p { font-size: 12px; } } /*------------------------------- 7.3 STORYTELLING --------------------------------*/ .st-manifesto { padding: 88px 0 104px; background: linear-gradient( 180deg, #ffffff 0%, #f8f8f8 48%, #ffffff 100% ); overflow: hidden; } .st-manifesto__header { max-width: 900px; margin: 0 auto 88px; text-align: center; } .st-manifesto__eyebrow { display: inline-flex; margin: 0 0 var(--st-space-md); color: var(--st-color-primary); font-size: var(--st-font-size-xs); font-weight: 800; line-height: 1; letter-spacing: .10em; text-transform: uppercase; } .st-manifesto__title { margin: 0; color: var(--st-color-text); font-size: clamp(42px, 5.4vw, 72px); font-weight: 900; line-height: 1.02; letter-spacing: -.05em; } .st-manifesto__intro { max-width: 700px; margin: var(--st-space-lg) auto 0; color: var(--st-color-text-muted); font-size: var(--st-font-size-md); line-height: 1.7; } .st-manifesto__journey { display: flex; flex-direction: column; gap: 104px; } .st-manifesto__chapter { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 72px; } .st-manifesto__chapter--reverse .st-manifesto__copy { order: 2; } .st-manifesto__chapter--reverse .st-manifesto__media { order: 1; } .st-manifesto__copy { max-width: 560px; } .st-manifesto__number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--st-space-lg); color: var(--st-color-primary); background: rgba(255,106,0,.08); border: 1px solid rgba(255,106,0,.18); border-radius: 50%; font-size: var(--st-font-size-xs); font-weight: 900; line-height: 1; letter-spacing: .06em; } .st-manifesto__label { margin: 0 0 var(--st-space-sm); color: var(--st-color-primary); font-size: var(--st-font-size-xs); font-weight: 800; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase; } .st-manifesto__chapter-title { margin: 0; color: var(--st-color-text); font-size: clamp(32px, 4vw, 52px); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; } .st-manifesto__statement { margin: var(--st-space-sm) 0 0; color: var(--st-color-primary); font-size: clamp(28px, 3vw, 42px); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; } .st-manifesto__text { margin: var(--st-space-lg) 0 0; color: var(--st-color-text-muted); font-size: var(--st-font-size-md); line-height: 1.75; } .st-manifesto__media { min-height: 520px; margin: 0; background: var(--st-color-dark); border: 1px solid var(--st-color-border); border-radius: var(--st-radius-xl); box-shadow: 0 26px 65px rgba(17,17,17,.13); overflow: hidden; position: relative; } .st-manifesto__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 145deg, transparent 55%, rgba(255,106,0,.09) 100% ); pointer-events: none; } .st-manifesto__media img { width: 100%; height: 100%; display: block; position: absolute; inset: 0; object-fit: cover; transform: scale(1.01); transition: transform .80s ease, filter .80s ease; } .st-manifesto__chapter:hover .st-manifesto__media img { transform: scale(1.045); } .st-manifesto__closing { max-width: 980px; margin: 112px auto 0; padding: 72px 64px; text-align: center; background: radial-gradient( circle at 50% 0%, rgba(255,106,0,.16), transparent 44% ), linear-gradient( 145deg, var(--st-color-black), var(--st-color-dark) ); border: 1px solid rgba(255,255,255,.08); border-radius: var(--st-radius-xl); box-shadow: 0 30px 75px rgba(17,17,17,.20); box-sizing: border-box; position: relative; overflow: hidden; } .st-manifesto__closing-label { margin: 0 0 var(--st-space-md); color: var(--st-color-primary-light); font-size: var(--st-font-size-xs); font-weight: 800; line-height: 1; letter-spacing: .10em; text-transform: uppercase; } .st-manifesto__closing-text { margin: 0; color: var(--st-color-white); font-size: clamp(30px, 4vw, 48px); font-weight: 850; line-height: 1.16; letter-spacing: -.035em; } /*------------------------------- 7.4 COLLECTIONS --------------------------------*/ .st-collections-section { padding: var(--st-space-2xl) 0 72px; } .st-categories-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-space-lg); } .st-category-card { min-height: 430px; display: flex; align-items: flex-end; padding: var(--st-space-xl); color: var(--st-color-white); background: var(--st-color-dark); border: 1px solid rgba(17,17,17,.10); border-radius: var(--st-radius-xl); box-shadow: 0 18px 45px rgba(17,17,17,.12); box-sizing: border-box; overflow: hidden; position: relative; text-decoration: none; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .st-category-card__image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transform: scale(1.01); filter: brightness(.62) saturate(.92); transition: transform .75s ease, filter .75s ease; } .st-category-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(8,8,8,.96) 0%, rgba(8,8,8,.67) 40%, rgba(8,8,8,.18) 78%, rgba(8,8,8,.08) 100% ); z-index: 1; transition: background .40s ease; } .st-category-card::before { content: ""; width: 210px; height: 210px; position: absolute; right: -100px; bottom: -120px; background: radial-gradient( circle, rgba(255,106,0,.30), transparent 68% ); border-radius: 50%; opacity: 0; z-index: 2; pointer-events: none; transition: opacity .40s ease, transform .60s ease; } .st-category-card__content { width: 100%; max-width: 640px; position: relative; z-index: 3; } .st-category-card__eyebrow { margin: 0 0 var(--st-space-sm); color: var(--st-color-primary-light); font-size: var(--st-font-size-xs); font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .st-category-card__title { margin: 0; color: var(--st-color-white); font-size: clamp(30px, 3.1vw, 42px); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; } .st-category-card__text { max-width: 540px; margin: var(--st-space-sm) 0 0; color: rgba(255,255,255,.76); font-size: var(--st-font-size-sm); line-height: 1.6; } .st-category-card__cta { display: inline-flex; align-items: center; gap: var(--st-space-xs); margin-top: var(--st-space-lg); color: var(--st-color-primary-light); font-size: var(--st-font-size-sm); font-weight: 800; line-height: 1; transition: gap .30s ease, color .30s ease, transform .30s ease; } .st-category-card__cta span { transition: transform .30s ease; } .st-category-card:hover { transform: translateY(-6px); border-color: rgba(255,106,0,.38); box-shadow: 0 28px 65px rgba(17,17,17,.18), 0 15px 36px rgba(255,106,0,.10); } .st-category-card:hover .st-category-card__image { transform: scale(1.07); filter: brightness(.70) saturate(1); } .st-category-card:hover .st-category-card__overlay { background: linear-gradient( to top, rgba(8,8,8,.97) 0%, rgba(8,8,8,.60) 44%, rgba(8,8,8,.13) 82%, rgba(8,8,8,.05) 100% ); } .st-category-card:hover::before { opacity: 1; transform: translate(-20px, -18px); } .st-category-card:hover .st-category-card__cta { gap: var(--st-space-sm); color: var(--st-color-white); transform: translateY(-2px); } .st-category-card:hover .st-category-card__cta span { transform: translateX(3px); } .st-category-card:focus-visible { outline: 3px solid var(--st-color-primary); outline-offset: 4px; } /*------------------------------- 7.5 PRODUCT BANNER --------------------------------*/ /*------------------------------- 7.6 WHATSAPP CTA --------------------------------*/ /*------------------------------- 7.7 FAQ --------------------------------*/ /*------------------------------- 7.8 FOOTER CTA --------------------------------*/ /*------------------------------- 7.9 NEWSLETTER --------------------------------*/ /*------------------------------- 7.10 PRODUCT BADGES --------------------------------*/ /*================================================== 8. PRODUTO ==================================================*/ /*================================================== 9. HEADER ==================================================*/ /*================================================== 10. FOOTER ==================================================*/ /*================================================== 11. ANIMAÇÕES ==================================================*/ /*================================================== 12. UTILITÁRIOS ==================================================*/ /*================================================== 13. RESPONSIVO ==================================================*/ @media screen and (max-width:990px){ .st-grid.st-grid-3{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media screen and (max-width:640px){ .shoptool-container, .st-container{ width:calc(100% - var(--st-space-lg)); } .st-grid.st-grid-3{ grid-template-columns:1fr; } } @media screen and (max-width:640px){ .st-section-header{ margin-bottom:28px; text-align:left; } .st-section-title{ font-size:var(--st-font-size-xl); letter-spacing:-.03em; } .st-section-text{ font-size:var(--st-font-size-sm); margin-top:var(--st-space-sm); } } @media screen and (max-width: 990px) { .st-hero__grid { grid-template-columns: 1fr; gap: var(--st-space-xl); min-height: auto; padding: var(--st-space-2xl); } .st-hero__content { max-width: 760px; } .st-hero__visual-card { max-width: none; min-height: 360px; transform: none; } .st-hero__visual-card:hover { transform: translateY(-4px); } } @media screen and (max-width: 640px) { .st-hero { padding: var(--st-space-md) 0; } .st-hero__grid { gap: var(--st-space-xl); padding: var(--st-space-xl) var(--st-space-lg); border-radius: var(--st-radius-lg); } .st-hero__title { font-size: 38px; line-height: 1.06; letter-spacing: -.035em; } .st-hero__text { margin-top: var(--st-space-md); font-size: var(--st-font-size-sm); line-height: 1.6; } .st-hero__actions { display: grid; grid-template-columns: 1fr; gap: var(--st-space-sm); margin-top: var(--st-space-lg); } .st-hero__primary-button, .st-hero__secondary-button { width: 100%; min-height: 52px; box-sizing: border-box; } .st-hero__highlights { display: grid; grid-template-columns: 1fr; gap: var(--st-space-sm); margin-top: var(--st-space-lg); } .st-hero__visual-card { min-height: 310px; padding: var(--st-space-lg); border-radius: var(--st-radius-lg); } .st-hero__visual-icon { width: 62px; height: 62px; margin-bottom: var(--st-space-md); border-radius: var(--st-radius-md); font-size: 28px; } .st-hero__visual-title { font-size: 25px; } } @media screen and (max-width:990px) { .st-collections-section { padding-bottom: var(--st-space-2xl); } .st-category-card { min-height: 370px; padding: var(--st-space-lg); } } @media screen and (max-width:768px) { .st-categories-grid { grid-template-columns: 1fr; gap: var(--st-space-md); } .st-category-card { min-height: 340px; border-radius: var(--st-radius-lg); } .st-category-card__content { max-width: 100%; } .st-category-card__title { font-size: 30px; } .st-category-card__text { font-size: 14px; } } @media screen and (max-width:640px) { .st-collections-section { padding: var(--st-space-xl) 0 var(--st-space-2xl); } .st-category-card { min-height: 320px; padding: var(--st-space-lg); } .st-category-card__cta { margin-top: var(--st-space-md); } } @media screen and (max-width:990px) { .st-manifesto { padding: 72px 0 88px; } .st-manifesto__header { margin-bottom: 64px; } .st-manifesto__journey { gap: 72px; } .st-manifesto__chapter { grid-template-columns: 1fr; gap: var(--st-space-xl); } .st-manifesto__chapter--reverse .st-manifesto__copy, .st-manifesto__chapter--reverse .st-manifesto__media { order: initial; } .st-manifesto__copy { max-width: 720px; } .st-manifesto__media { min-height: 460px; } .st-manifesto__closing { margin-top: 88px; } } @media screen and (max-width:640px) { .st-manifesto { padding: 56px 0 64px; } .st-manifesto__header { margin-bottom: 48px; text-align: left; } .st-manifesto__title { font-size: 40px; line-height: 1.05; } .st-manifesto__intro { margin-top: var(--st-space-md); font-size: var(--st-font-size-sm); } .st-manifesto__journey { gap: 56px; } .st-manifesto__chapter { gap: var(--st-space-lg); } .st-manifesto__number { width: 42px; height: 42px; margin-bottom: var(--st-space-md); } .st-manifesto__chapter-title { font-size: 32px; } .st-manifesto__statement { font-size: 28px; } .st-manifesto__text { margin-top: var(--st-space-md); font-size: var(--st-font-size-sm); line-height: 1.7; } .st-manifesto__media { min-height: 330px; border-radius: var(--st-radius-lg); } .st-manifesto__closing { margin-top: 64px; padding: var(--st-space-2xl) var(--st-space-lg); border-radius: var(--st-radius-lg); } .st-manifesto__closing-text { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { .st-manifesto__media img { transition: none; } .st-manifesto__chapter:hover .st-manifesto__media img { transform: none; } } /* ================================================== SHOPTOOL — CURADORIA ================================================== */ .shoptool-curadoria { --curadoria-texto: #2e2a39; --curadoria-texto-suave: rgba(46, 42, 57, 0.72); --curadoria-borda: rgba(46, 42, 57, 0.1); --curadoria-sombra: 0 10px 30px rgba(46, 42, 57, 0.07); } /* Cabeçalho */ .shoptool-curadoria .collection__title { max-width: 760px; margin-inline: auto; margin-bottom: 3.2rem; text-align: center; } .shoptool-curadoria .collection__title .title { margin-bottom: 1.2rem; color: var(--curadoria-texto); line-height: 1.15; letter-spacing: -0.02em; } .shoptool-curadoria .collection__description { max-width: 680px; margin-inline: auto; color: var(--curadoria-texto-suave); line-height: 1.65; } /* Área de cada produto */ .shoptool-curadoria .splide__slide__container--card { height: 100%; padding: 1rem; border: 1px solid var(--curadoria-borda); border-radius: 1.8rem; background: #ffffff; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } @media (hover: hover) and (pointer: fine) { .shoptool-curadoria .splide__slide__container--card:hover { transform: translateY(-4px); border-color: rgba(46, 42, 57, 0.16); box-shadow: var(--curadoria-sombra); } } /* Mobile */ @media screen and (max-width: 749px) { .shoptool-curadoria .collection__title { margin-bottom: 2.4rem; padding-inline: 2rem; } .shoptool-curadoria .collection__title .title { margin-bottom: 1rem; } .shoptool-curadoria .collection__description { line-height: 1.55; } .shoptool-curadoria .splide__slide__container--card { padding: 0.8rem; border-radius: 1.4rem; } } /* ================================================== SHOPTOOL — CARD DA CURADORIA ================================================== */ /* Imagem */ .shoptool-curadoria .card__media { overflow: hidden; border-radius: 16px; } .shoptool-curadoria .card__media img { transition: transform .35s ease; } @media (hover:hover){ .shoptool-curadoria .card:hover .card__media img{ transform: scale(1.03); } } /* Conteúdo */ .shoptool-curadoria .card__content{ padding-top:16px; } /* Nome */ .shoptool-curadoria .card__heading{ line-height:1.35; font-weight:600; margin-bottom:10px; } /* Preço */ .shoptool-curadoria .price{ margin-top:10px; font-weight:700; } /* Quick Add */ .shoptool-curadoria .quick-add{ margin-top:18px; } .shoptool-curadoria .quick-add__submit{ border-radius:14px; transition:.25s ease; } @media (hover:hover){ .shoptool-curadoria .quick-add__submit:hover{ transform:translateY(-2px); } } /* ================================================== SHOPTOOL — QUICK ADD PREMIUM ================================================== */ .shoptool-curadoria .quick-add__submit { min-height: 48px; padding: 1.2rem 1.6rem; border: 1px solid rgba(46, 42, 57, 0.14); border-radius: 14px; background: #2e2a39; color: #ffffff; font-weight: 700; line-height: 1.2; letter-spacing: 0; box-shadow: 0 6px 16px rgba(46, 42, 57, 0.12); transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease; } @media (hover: hover) and (pointer: fine) { .shoptool-curadoria .quick-add__submit:hover { transform: translateY(-2px); background: #3a3548; border-color: rgba(46, 42, 57, 0.2); box-shadow: 0 10px 22px rgba(46, 42, 57, 0.16); } } .shoptool-curadoria .quick-add__submit:focus-visible { outline: 3px solid rgba(109, 56, 139, 0.28); outline-offset: 3px; } .shoptool-curadoria .quick-add__submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } /* Mobile */ @media screen and (max-width: 749px) { .shoptool-curadoria .quick-add { margin-top: 1.4rem; } .shoptool-curadoria .quick-add__submit { min-height: 44px; padding: 1rem 1.2rem; border-radius: 12px; font-size: 1.3rem; } } /* ===================================================== SHOPTOOL — BANNER EDITORIAL ===================================================== */ .shoptool-banner-produto .shoptool-banner-editorial{ margin-bottom:28px; } .shoptool-banner-produto .shoptool-banner-kicker{ display:inline-flex; padding:8px 14px; border-radius:999px; background:#F3ECF8; color:#6D388B; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .shoptool-banner-produto .shoptool-banner-copy{ margin-top:16px; margin-bottom:0; max-width:470px; color:#6A6675; line-height:1.7; font-size:16px; } /* ===================================================== SHOPTOOL — BANNER EDITORIAL: ACABAMENTO ===================================================== */ .shoptool-banner-produto { --banner-texto: #2e2a39; --banner-texto-suave: #6a6675; --banner-borda: rgba(46, 42, 57, 0.1); --banner-accent: #ff6a00; } /* Une imagem e conteúdo em um único bloco */ .shoptool-banner-produto .featured-product { overflow: hidden; border: 1px solid var(--banner-borda); border-radius: 24px; background: #ffffff; box-shadow: 0 12px 36px rgba(46, 42, 57, 0.06); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } /* Área de texto */ .shoptool-banner-produto .product__info-wrapper { display: flex; align-items: center; padding: 4.8rem; } /* Centraliza o conteúdo editorial em relação à galeria */ @media screen and (min-width: 750px) { .shoptool-banner-produto .product__info-wrapper { align-self: stretch; } .shoptool-banner-produto .product__info-container { display: flex; flex-direction: column; justify-content: center; min-height: 100%; } } .shoptool-banner-produto .product__info-container { width: 100%; max-width: 52rem; } /* Ajusta a distância da introdução editorial */ .shoptool-banner-produto .shoptool-banner-editorial { margin-bottom: 2.2rem; } .shoptool-banner-produto .shoptool-banner-copy { margin-top: 1.4rem; line-height: 1.65; } /* Aproxima o título do texto editorial */ .shoptool-banner-produto .product__title { margin-top: 0 !important; } .shoptool-banner-produto .product__title h1 { margin: 0; color: var(--banner-texto); line-height: 1.12; letter-spacing: -0.025em; } /* Remove o título duplicado de segurança do tema */ .shoptool-banner-produto .product__title > a { display: none; } /* Galeria */ .shoptool-banner-produto .product__media-wrapper { overflow: hidden; } .shoptool-banner-produto .product__media img { transition: transform 420ms ease; } /* ===================================================== CTA — CONHECER PRODUTO ===================================================== */ .shoptool-banner-produto .product__view-details { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; min-height: 50px; margin-top: 1.6rem; padding: 1.3rem 2.2rem; border: 1px solid rgba(255, 106, 0, 0.26); border-radius: 14px; background: rgba(255, 106, 0, 0.08); color: var(--banner-accent); font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } /* Movimento da seta */ .shoptool-banner-produto .product__view-details .icon-wrap, .shoptool-banner-produto .product__view-details svg { transition: transform 220ms ease; } /* Interações para dispositivos com mouse */ @media (hover: hover) and (pointer: fine) { .shoptool-banner-produto .product__view-details:hover { transform: translateY(-2px); background: rgba(255, 106, 0, 0.14); border-color: rgba(255, 106, 0, 0.42); box-shadow: 0 8px 18px rgba(255, 106, 0, 0.16); } .shoptool-banner-produto .product__view-details:hover .icon-wrap, .shoptool-banner-produto .product__view-details:hover svg { transform: translateX(3px); } } /* Acessibilidade pelo teclado */ .shoptool-banner-produto .product__view-details:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.34); outline-offset: 3px; }/* ===================================================== CTA — CONHECER PRODUTO ===================================================== */ .shoptool-banner-produto .product__view-details { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; min-height: 50px; margin-top: 1.6rem; padding: 1.3rem 2.2rem; border: 1px solid rgba(255, 106, 0, 0.26); border-radius: 14px; background: rgba(255, 106, 0, 0.08); color: var(--banner-accent); font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } /* Movimento da seta */ .shoptool-banner-produto .product__view-details .icon-wrap, .shoptool-banner-produto .product__view-details svg { transition: transform 220ms ease; } /* Interações para dispositivos com mouse */ @media (hover: hover) and (pointer: fine) { .shoptool-banner-produto .product__view-details:hover { transform: translateY(-2px); background: rgba(255, 106, 0, 0.14); border-color: rgba(255, 106, 0, 0.42); box-shadow: 0 8px 18px rgba(255, 106, 0, 0.16); } .shoptool-banner-produto .product__view-details:hover .icon-wrap, .shoptool-banner-produto .product__view-details:hover svg { transform: translateX(3px); } } /* Acessibilidade pelo teclado */ .shoptool-banner-produto .product__view-details:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.34); outline-offset: 3px; }gba(109, 56, 139, 0.11); } .shoptool-banner-produto .product__view-details:hover .icon-wrap, .shoptool-banner-produto .product__view-details:hover svg { transform: translateX(3px); } } /* Acessibilidade */ { outline: 3px solid rgba(109, 56, 139, 0.28); outline-offset: 3px; } /* Mobile */ @media screen and (max-width: 749px) { .shoptool-banner-produto .featured-product { border-radius: 18px; } .shoptool-banner-produto .product__info-wrapper { padding: 2.8rem 2rem 3.2rem; } .shoptool-banner-produto .shoptool-banner-editorial { margin-bottom: 1.8rem; } .shoptool-banner-produto .product__title h1 { font-size: 2.7rem; line-height: 1.15; } .shoptool-banner-produto .product__view-details { width: 100%; min-height: 48px; margin-top: 1.4rem; padding: 1.2rem 1.6rem; } } @media screen and (min-width: 750px) { .shoptool-banner-produto .product__view-details { min-width: 240px; } } /* ================================================== SHOPTOOL — DEPOIMENTOS PREMIUM ================================================== */ .shoptool-reviews { --reviews-text: #2e2a39; --reviews-text-soft: rgba(46, 42, 57, 0.72); --reviews-border: rgba(46, 42, 57, 0.1); --reviews-accent: #6d388b; --reviews-accent-soft: rgba(109, 56, 139, 0.08); padding: 9rem 2rem; background: #f7f7f8; overflow: hidden; } .shoptool-reviews__container { width: 100%; max-width: 135rem; margin-inline: auto; } .shoptool-reviews__header { max-width: 76rem; margin: 0 auto 5.6rem; text-align: center; } .shoptool-reviews__eyebrow { display: inline-flex; margin-bottom: 1.6rem; padding: 0.8rem 1.4rem; border-radius: 999px; background: var(--reviews-accent-soft); color: var(--reviews-accent); font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; } .shoptool-reviews__header h2 { margin: 0 0 1.8rem; color: var(--reviews-text); font-size: clamp(3.2rem, 4vw, 5.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; } .shoptool-reviews__header p { margin: 0; color: var(--reviews-text-soft); font-size: 1.8rem; line-height: 1.7; } .shoptool-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8rem; } .shoptool-review-card { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 100%; padding: 3.4rem; border: 1px solid var(--reviews-border); border-radius: 2.4rem; background: #ffffff; box-shadow: 0 10px 30px rgba(46, 42, 57, 0.05); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .shoptool-review-card__stars { margin-bottom: 2rem; color: var(--reviews-accent); font-size: 2rem; line-height: 1; letter-spacing: 0.12em; } .shoptool-review-card h3 { margin: 0 0 1.4rem; color: var(--reviews-text); font-size: 2.3rem; font-weight: 700; line-height: 1.25; } .shoptool-review-card__content > p { margin: 0 0 2.8rem; color: var(--reviews-text-soft); font-size: 1.6rem; line-height: 1.75; } .shoptool-review-card__customer { display: flex; align-items: center; gap: 1.2rem; padding-top: 1.8rem; border-top: 1px solid var(--reviews-border); } .shoptool-review-card__customer img { width: 4.8rem; height: 4.8rem; flex: 0 0 auto; border-radius: 50%; object-fit: cover; } .shoptool-review-card__customer div { display: flex; flex-direction: column; gap: 0.3rem; } .shoptool-review-card__customer strong { color: var(--reviews-text); font-size: 1.5rem; line-height: 1.3; } .shoptool-review-card__customer span { color: var(--reviews-text-soft); font-size: 1.3rem; line-height: 1.3; } @media (hover: hover) and (pointer: fine) { .shoptool-review-card:hover { transform: translateY(-4px); border-color: rgba(109, 56, 139, 0.18); box-shadow: 0 16px 38px rgba(46, 42, 57, 0.08); } } @media screen and (max-width: 990px) { .shoptool-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shoptool-review-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 1.4rem); width: 100%; justify-self: center; } } @media screen and (max-width: 749px) { .shoptool-reviews { padding: 7rem 1.6rem; } .shoptool-reviews__header { margin-bottom: 3.8rem; } .shoptool-reviews__header p { font-size: 1.5rem; line-height: 1.65; } .shoptool-reviews__grid { grid-template-columns: 1fr; gap: 1.8rem; } .shoptool-review-card, .shoptool-review-card:last-child { grid-column: auto; max-width: none; padding: 2.8rem 2.2rem; border-radius: 2rem; } .shoptool-review-card h3 { font-size: 2.1rem; } .shoptool-review-card__content > p { font-size: 1.5rem; line-height: 1.7; } .shoptool-review-card__customer img { width: 4.2rem; height: 4.2rem; } } /* ================================================== SHOPTOOL — FAQ V2 ================================================== */ .shoptool-faq-v2, .shoptool-faq-v2 * { box-sizing: border-box; } .shoptool-faq-v2 { --faq-v2-text: #2e2a39; --faq-v2-text-soft: #686473; --faq-v2-accent: #ff6a00; --faq-v2-accent-soft: #ff6a0020; --faq-v2-border: rgba(46, 42, 57, 0.12); position: relative; z-index: 1; display: block; width: 100%; padding: 9rem 2rem; background: #ffffff; color: var(--faq-v2-text); opacity: 1; isolation: isolate; } .shoptool-faq-v2__container { width: 100%; max-width: 100rem; margin: 0 auto; opacity: 1; } .shoptool-faq-v2__header { max-width: 74rem; margin: 0 auto 5rem; color: var(--faq-v2-text); text-align: center; opacity: 1; } .shoptool-faq-v2__eyebrow { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 1.6rem; padding: 0.8rem 1.4rem; border-radius: 999px; background: var(--faq-v2-accent-soft); color: var(--faq-v2-accent); font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; opacity: 1; } .shoptool-faq-v2__header h2 { margin: 0 0 1.8rem; color: var(--faq-v2-text) !important; font-size: clamp(3.2rem, 4vw, 5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; text-transform: none; opacity: 1 !important; filter: none !important; } .shoptool-faq-v2__header p { margin: 0; color: var(--faq-v2-text-soft) !important; font-size: 1.8rem; font-weight: 400; line-height: 1.7; opacity: 1 !important; filter: none !important; } .shoptool-faq-v2__list { display: flex; flex-direction: column; gap: 1.4rem; width: 100%; } .shoptool-faq-v2__item { width: 100%; overflow: hidden; border: 1px solid var(--faq-v2-border); border-radius: 1.8rem; background: #ffffff; color: var(--faq-v2-text); opacity: 1; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .shoptool-faq-v2__item[open] { border-color: rgba(109, 56, 139, 0.24); box-shadow: 0 12px 30px rgba(46, 42, 57, 0.07); } .shoptool-faq-v2__item summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; padding: 2.2rem 2.4rem; background: #ffffff; color: var(--faq-v2-text); cursor: pointer; list-style: none; opacity: 1; } .shoptool-faq-v2__item summary::-webkit-details-marker { display: none; } .shoptool-faq-v2__item summary::marker { display: none; content: ""; } .shoptool-faq-v2__question { color: var(--faq-v2-text) !important; font-size: 1.7rem; font-weight: 700; line-height: 1.4; opacity: 1 !important; } .shoptool-faq-v2__icon { position: relative; display: block; width: 2rem; height: 2rem; flex: 0 0 2rem; } .shoptool-faq-v2__icon::before, .shoptool-faq-v2__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.4rem; height: 2px; border-radius: 999px; background: var(--faq-v2-accent); transform: translate(-50%, -50%); transition: transform 220ms ease; } .shoptool-faq-v2__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .shoptool-faq-v2__item[open] .shoptool-faq-v2__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .shoptool-faq-v2__answer { padding: 0 2.4rem 2.2rem; background: #ffffff; color: var(--faq-v2-text-soft); opacity: 1; } .shoptool-faq-v2__answer p { max-width: 82rem; margin: 0; color: var(--faq-v2-text-soft) !important; font-size: 1.6rem; font-weight: 400; line-height: 1.75; opacity: 1 !important; filter: none !important; } .shoptool-faq-v2__item summary:focus-visible { outline: 3px solid rgba(109, 56, 139, 0.28); outline-offset: -3px; } @media (hover: hover) and (pointer: fine) { .shoptool-faq-v2__item:hover { transform: translateY(-2px); border-color: rgba(109, 56, 139, 0.22); box-shadow: 0 10px 24px rgba(46, 42, 57, 0.05); } } @media screen and (max-width: 749px) { .shoptool-faq-v2 { padding: 7rem 1.6rem; } .shoptool-faq-v2__header { margin-bottom: 3.8rem; } .shoptool-faq-v2__header h2 { font-size: 3.2rem; line-height: 1.12; } .shoptool-faq-v2__header p { font-size: 1.5rem; line-height: 1.65; } .shoptool-faq-v2__list { gap: 1.2rem; } .shoptool-faq-v2__item { border-radius: 1.6rem; } .shoptool-faq-v2__item summary { gap: 1.4rem; padding: 1.9rem 1.8rem; } .shoptool-faq-v2__question { font-size: 1.55rem; line-height: 1.4; } .shoptool-faq-v2__answer { padding: 0 1.8rem 1.9rem; } .shoptool-faq-v2__answer p { font-size: 1.45rem; line-height: 1.7; } } /* ========================================================= SHOPTOOL — NEWSLETTER ========================================================= */ .shopify-section .newsletter { padding-inline: 20px; } .shopify-section .newsletter__wrapper { max-width: 1100px; margin: 0 auto; padding: 88px 32px; border-radius: 28px; text-align: center; } .shopify-section .newsletter__wrapper > h2 { max-width: 760px; margin: 0 auto 18px; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; letter-spacing: -0.03em; } .shopify-section .newsletter__subheading { max-width: 680px; margin: 0 auto 36px; } .shopify-section .newsletter__subheading p { margin: 0; font-size: 18px; line-height: 1.7; opacity: 0.72; } .shopify-section .newsletter-form { max-width: 620px; margin: 0 auto; } .shopify-section .newsletter-form__field-wrapper { display: grid; gap: 14px; } .shopify-section .newsletter-form .field { min-height: 58px; } .shopify-section .newsletter-form .field__input { min-height: 58px; padding: 0 20px; border-radius: 14px; font-size: 16px; } .shopify-section .newsletter-form .field__label { left: 20px; } .shopify-section .newsletter__solid-btn { min-height: 58px; margin-top: 0; border-radius: 14px; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .shopify-section .newsletter__solid-btn:hover { transform: translateY(-2px); } .shopify-section .newsletter__solid-btn:active { transform: translateY(0); } @media screen and (max-width: 749px) { .shopify-section .newsletter { padding-inline: 16px; } .shopify-section .newsletter__wrapper { padding: 64px 20px; border-radius: 22px; } .shopify-section .newsletter__wrapper > h2 { margin-bottom: 16px; font-size: 36px; line-height: 1.12; } .shopify-section .newsletter__subheading { margin-bottom: 30px; } .shopify-section .newsletter__subheading p { font-size: 16px; line-height: 1.65; } .shopify-section .newsletter-form .field, .shopify-section .newsletter-form .field__input, .shopify-section .newsletter__solid-btn { min-height: 56px; } } /* Centralizar formulário da Newsletter */ .shopify-section .newsletter-form__field-wrapper{ max-width: 620px; margin: 0 auto; } .shopify-section .newsletter-form{ display:flex; justify-content:center; } .shopify-section .newsletter-form form{ width:100%; max-width:620px; } /* ========================================================= SHOPTOOL — FOOTER V2 ========================================================= */ .shoptool-footer { background: #0b0b0b; padding: 88px 20px 32px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: #fff; } .shoptool-footer-container { width: 100%; max-width: 1350px; margin: 0 auto; } /* ESTRUTURA PRINCIPAL */ .shoptool-footer-grid { display: grid; grid-template-columns: minmax(280px, 1.8fr) repeat(3, minmax(160px, 1fr)); gap: 56px; margin-bottom: 64px; } /* MARCA */ .shoptool-footer-logo { display: inline-block; margin-bottom: 22px; } .shoptool-footer-brand img { display: block; width: 100%; max-width: 220px; height: auto; } .shoptool-footer-brand p { max-width: 410px; margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 16px; line-height: 1.75; } /* COLUNAS */ .shoptool-footer-column { min-width: 0; } .shoptool-footer h3 { margin: 0 0 22px; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.3; } /* LINKS */ .shoptool-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .shoptool-footer-links a, .shoptool-footer-bottom-links a { color: rgba(255, 255, 255, 0.68); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .shoptool-footer-links a { font-size: 15px; line-height: 1.5; } .shoptool-footer-links a:hover, .shoptool-footer-bottom-links a:hover { color: #ff6a00; } .shoptool-footer-links a:hover { transform: translateX(3px); } /* COMPRA SEGURA */ .shoptool-footer-security-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; } .shoptool-footer-security-list li { position: relative; padding-left: 20px; color: rgba(255, 255, 255, 0.68); font-size: 14px; line-height: 1.5; } .shoptool-footer-security-list li::before { content: "✓"; position: absolute; top: 0; left: 0; color: #ff6a00; font-weight: 700; } .shoptool-footer-payments { display: flex; flex-direction: column; align-items: flex-start; } .shoptool-footer-payments p { margin: 0 0 12px; color: rgba(255, 255, 255, 0.45); font-size: 13px; } .shoptool-footer-payments img { display: block; width: 100%; max-width: 260px; height: auto; opacity: 0.92; } /* PARTE INFERIOR */ .shoptool-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .shoptool-footer-copy { margin: 0; color: rgba(255, 255, 255, 0.45); font-size: 14px; line-height: 1.5; } .shoptool-footer-bottom-links { display: flex; align-items: center; gap: 24px; } .shoptool-footer-bottom-links a { font-size: 13px; } /* TABLET */ @media screen and (max-width: 1100px) { .shoptool-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } .shoptool-footer-security { grid-column: 2 / -1; } } /* MOBILE */ @media screen and (max-width: 749px) { .shoptool-footer { padding: 64px 20px 28px; } .shoptool-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 44px; } .shoptool-footer-security { grid-column: auto; } .shoptool-footer-logo { margin-bottom: 18px; } .shoptool-footer-brand img { max-width: 180px; } .shoptool-footer-brand p { max-width: 100%; font-size: 15px; line-height: 1.7; } .shoptool-footer h3 { margin-bottom: 17px; } .shoptool-footer-payments img { max-width: 260px; } .shoptool-footer-bottom { flex-direction: column; align-items: flex-start; } .shoptool-footer-bottom-links { flex-wrap: wrap; gap: 12px 20px; } } /* ========================================================= SHOPTOOL — PRODUCT PAGE / PDP ========================================================= */ /* Estrutura desta área: 01. Variáveis locais da PDP 02. Estrutura principal 03. Galeria de mídia 04. Bloco de compra 05. Preço e condições 06. Variantes 07. Botões de compra 08. Benefícios e confiança 09. Linha do tempo de entrega 10. Descrição editorial 11. Informações técnicas 12. FAQ do produto 13. Produtos relacionados 14. Avaliações 15. Barra de compra fixa 16. Responsividade */ /* --------------------------------------------------------- 01. VARIÁVEIS LOCAIS DA PDP --------------------------------------------------------- */ body.template-product { --shoptool-pdp-content-width: 1320px; --shoptool-pdp-column-gap: 56px; --shoptool-pdp-radius-sm: 12px; --shoptool-pdp-radius-md: 18px; --shoptool-pdp-radius-lg: 26px; --shoptool-pdp-border: rgba(15, 15, 15, 0.1); --shoptool-pdp-text-soft: rgba(15, 15, 15, 0.66); --shoptool-pdp-surface-soft: #f7f7f7; --shoptool-pdp-space-xs: 8px; --shoptool-pdp-space-sm: 16px; --shoptool-pdp-space-md: 24px; --shoptool-pdp-space-lg: 40px; --shoptool-pdp-space-xl: 64px; } /* --------------------------------------------------------- 02. ESTRUTURA PRINCIPAL --------------------------------------------------------- */ /* Os seletores definitivos serão adicionados depois que identificarmos as classes reais usadas pelo Shrine. */ /* --------------------------------------------------------- 03. GALERIA DE MÍDIA --------------------------------------------------------- */ /* --------------------------------------------------------- 04. BLOCO DE COMPRA --------------------------------------------------------- */ /* --------------------------------------------------------- 05. PREÇO E CONDIÇÕES --------------------------------------------------------- */ /* --------------------------------------------------------- 06. VARIANTES --------------------------------------------------------- */ /* --------------------------------------------------------- 07. BOTÕES DE COMPRA --------------------------------------------------------- */ /* --------------------------------------------------------- 08. BENEFÍCIOS E CONFIANÇA --------------------------------------------------------- */ /* --------------------------------------------------------- 09. LINHA DO TEMPO DE ENTREGA --------------------------------------------------------- */ /* --------------------------------------------------------- 10. DESCRIÇÃO EDITORIAL --------------------------------------------------------- */ /* --------------------------------------------------------- 11. INFORMAÇÕES TÉCNICAS --------------------------------------------------------- */ /* --------------------------------------------------------- 12. FAQ DO PRODUTO --------------------------------------------------------- */ /* --------------------------------------------------------- 13. PRODUTOS RELACIONADOS --------------------------------------------------------- */ /* --------------------------------------------------------- 14. AVALIAÇÕES --------------------------------------------------------- */ /* --------------------------------------------------------- 15. BARRA DE COMPRA FIXA --------------------------------------------------------- */ /* --------------------------------------------------------- 16. RESPONSIVIDADE --------------------------------------------------------- */ @media screen and (max-width: 989px) { body.template-product { --shoptool-pdp-column-gap: 32px; --shoptool-pdp-space-xl: 48px; } } @media screen and (max-width: 749px) { body.template-product { --shoptool-pdp-radius-md: 14px; --shoptool-pdp-radius-lg: 20px; --shoptool-pdp-space-md: 20px; --shoptool-pdp-space-lg: 32px; --shoptool-pdp-space-xl: 40px; } } /* ========================================================= PDP — BENEFÍCIO PRINCIPAL PREMIUM ========================================================= */ .shoptool-benefit-card { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; gap: 12px; width: 100%; max-width: 100%; margin: 14px 0 20px; padding: 15px 16px; background: linear-gradient( 135deg, #fff7f1 0%, #ffffff 100% ); border: 1px solid rgba(255, 106, 0, 0.2); border-left: 3px solid #ff6a00; border-radius: 0 14px 14px 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.035); } /* Indicador laranja */ .shoptool-benefit-card__marker { display: block; width: 9px; height: 9px; margin-top: 6px; background: #ff6a00; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.13); } /* Conteúdo */ .shoptool-benefit-card__content { min-width: 0; } /* Pequeno título */ .shoptool-benefit-card__label { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; color: #e85f00; } /* Texto vindo do metacampo */ .shoptool-benefit-card__text { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.55; letter-spacing: -0.01em; color: #333333; } /* ========================================================= PDP — BENEFÍCIO PRINCIPAL NO MOBILE ========================================================= */ @media screen and (max-width: 749px) { .shoptool-benefit-card { gap: 10px; margin: 12px 0 18px; padding: 13px 14px; border-radius: 0 12px 12px 0; } .shoptool-benefit-card__marker { width: 8px; height: 8px; margin-top: 6px; box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.13); } .shoptool-benefit-card__label { margin-bottom: 4px; font-size: 9.5px; } .shoptool-benefit-card__text { font-size: 13.5px; line-height: 1.5; } } /* Respiro entre Ryviu e benefício principal */ #MainContent .main-product__info-container .shoptool-benefit-card { margin-top: 18px !important; } /* ========================================================= PDP — SELETOR DE VARIANTES PREMIUM ========================================================= */ /* Espaçamento geral */ #MainContent .main-product__info-container variant-selects { display: block; margin-top: 26px !important; margin-bottom: 24px !important; } /* Área do título da variante */ #MainContent .main-product__info-container .product-form__label-container { margin-bottom: 11px; } #MainContent .main-product__info-container .product-form__label-container .form__label { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: #292929; } /* Aparência padrão das opções */ #MainContent .main-product__info-container .product-form__input--pills input[type="radio"] + label { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 42px; margin: 0 7px 7px 0; padding: 9px 15px; background: #ffffff; border: 1px solid #dedede; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1; color: #282828; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } /* Hover somente em opções disponíveis */ #MainContent .main-product__info-container .product-form__input--pills input[type="radio"]:not(.disabled) + label:hover { border-color: #ff6a00; box-shadow: 0 4px 12px rgba(255, 106, 0, 0.12); transform: translateY(-1px); } /* Opção selecionada */ #MainContent .main-product__info-container .product-form__input--pills input[type="radio"]:checked + label { background: #111111; border-color: #111111; color: #ffffff; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16); transform: none; } /* Opções indisponíveis */ #MainContent .main-product__info-container .product-form__input--pills input[type="radio"].disabled + label, #MainContent .main-product__info-container .product-form__input--pills input[type="radio"].unavailable + label { background: #f6f6f6; border-color: #e5e5e5; color: #999999; opacity: 0.7; cursor: not-allowed; text-decoration: line-through; box-shadow: none; transform: none; } /* Acessibilidade pelo teclado */ #MainContent .main-product__info-container .product-form__input--pills input[type="radio"]:focus-visible + label { outline: 2px solid #ff6a00; outline-offset: 3px; } /* ========================================================= PDP — VARIANTES NO MOBILE ========================================================= */ @media screen and (max-width: 749px) { #MainContent .main-product__info-container variant-selects { margin-top: 22px !important; margin-bottom: 20px !important; } #MainContent .main-product__info-container .product-form__input--pills input[type="radio"] + label { min-width: 46px; min-height: 42px; margin-right: 6px; padding: 9px 13px; font-size: 12.5px; } } /* ========================================================= PDP — PREÇO NATIVO PREMIUM ========================================================= */ /* Espaçamento externo do bloco */ #MainContent .main-product__info-container .product-page-price { margin-top: 24px !important; margin-bottom: 22px !important; } /* Organização horizontal */ #MainContent .main-product__info-container .product-page-price .price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } /* Remove margens desnecessárias do tema */ #MainContent .main-product__info-container .product-page-price .price__container { margin: 0; } /* Organização dos preços promocionais */ #MainContent .main-product__info-container .product-page-price .price--on-sale .price__sale { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; } /* Preço atual, com ou sem promoção */ #MainContent .main-product__info-container .product-page-price .price__regular .main-price, #MainContent .main-product__info-container .product-page-price .price__sale .price-item--sale { margin: 0; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.035em; color: #ff6a00; } /* Preço anterior riscado */ #MainContent .main-product__info-container .product-page-price .price__compare-price .main-comapre-price { margin: 0; font-size: 15px; font-weight: 500; line-height: 1; color: #777777; text-decoration-thickness: 1px; text-decoration-color: #8d8d8d; } /* Selo de desconto */ #MainContent .main-product__info-container .product-page-price .price--on-sale .price__badge-sale { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 6px 10px; background: #fff3e8 !important; border: 1px solid rgba(255, 106, 0, 0.2); border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; color: #e85f00 !important; box-shadow: none; } /* Ícone do selo */ #MainContent .main-product__info-container .product-page-price .price__badge-sale svg { width: 12px; height: 12px; color: #e85f00 !important; } /* ========================================================= PDP — PREÇO NO MOBILE ========================================================= */ @media screen and (max-width: 749px) { #MainContent .main-product__info-container .product-page-price { margin-top: 20px !important; margin-bottom: 20px !important; } #MainContent .main-product__info-container .product-page-price .price__regular .main-price, #MainContent .main-product__info-container .product-page-price .price__sale .price-item--sale { font-size: 28px; } #MainContent .main-product__info-container .product-page-price .price__compare-price .main-comapre-price { font-size: 14px; } #MainContent .main-product__info-container .product-page-price .price__badge-sale { padding: 5px 8px; font-size: 10px; } } /* ========================================================= PDP — BOTÃO PRINCIPAL PREMIUM ========================================================= */ /* Mantém o verde reservado para ações de compra. O mesmo tom será utilizado na sticky bar. */ #MainContent .main-product__info-container .main-product-atc, #MainContent .main-product__info-container .sticky-atc .button { --color-button: 48, 153, 61 !important; --color-button-text: 255, 255, 255 !important; } /* Estrutura principal */ #MainContent .main-product__info-container .main-product-atc { min-height: 56px; padding: 0 22px; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 7px 18px rgba(48, 153, 61, 0.22); cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; } /* Corrige as camadas internas criadas pelo Shrine */ #MainContent .main-product__info-container .main-product-atc::before, #MainContent .main-product__info-container .main-product-atc::after { border-radius: inherit !important; } /* Tipografia */ #MainContent .main-product__info-container .main-product-atc .main-atc__label__text { font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: 0.055em; text-transform: uppercase; } /* Hover apenas em dispositivos com mouse */ @media (hover: hover) { #MainContent .main-product__info-container .main-product-atc:not(:disabled):not([aria-disabled="true"]):hover { --color-button: 38, 130, 52 !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(38, 130, 52, 0.27); } } /* Momento do clique */ #MainContent .main-product__info-container .main-product-atc:not(:disabled):active { transform: translateY(0); box-shadow: 0 4px 10px rgba(38, 130, 52, 0.2); } /* Navegação pelo teclado */ #MainContent .main-product__info-container .main-product-atc:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.45); outline-offset: 3px; } /* Estado indisponível ou esgotado */ #MainContent .main-product__info-container .main-product-atc:disabled, #MainContent .main-product__info-container .main-product-atc[aria-disabled="true"] { --color-button: 183, 183, 183 !important; --color-button-text: 255, 255, 255 !important; opacity: 1; cursor: not-allowed; box-shadow: none; transform: none; } /* Estado de carregamento */ #MainContent .main-product__info-container .main-product-atc.loading { cursor: wait; box-shadow: 0 4px 12px rgba(48, 153, 61, 0.18); } #MainContent .main-product__info-container .main-product-atc.loading .main-atc__label { opacity: 0; } #MainContent .main-product__info-container .main-product-atc .loading-overlay__spinner .spinner .path { stroke: #ffffff; } /* ========================================================= PDP — BOTÃO DA STICKY BAR ========================================================= */ /* ========================================================= PDP — BOTÃO NO MOBILE ========================================================= */ @media screen and (max-width: 749px) { #MainContent .main-product__info-container .main-product-atc { min-height: 54px; padding: 0 18px; border-radius: 12px; box-shadow: 0 6px 15px rgba(48, 153, 61, 0.2); } #MainContent .main-product__info-container .main-product-atc .main-atc__label__text { font-size: 14px; letter-spacing: 0.045em; } } /* Respeita usuários com redução de movimento */ @media (prefers-reduced-motion: reduce) { #MainContent .main-product__info-container .main-product-atc { transition: none; } #MainContent .main-product__info-container .main-product-atc:hover, #MainContent .main-product__info-container .main-product-atc:active { transform: none; } } /* ========================================================= PDP — PIX PREMIUM ========================================================= */ #MainContent .main-product__info-container .shoptool-pix-card { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; max-width: 100%; margin-top: 14px !important; margin-bottom: 0 !important; padding: 13px 15px; background: linear-gradient( 135deg, rgba(48, 153, 61, 0.08) 0%, rgba(255, 255, 255, 0.98) 100% ); border: 1px solid rgba(48, 153, 61, 0.18); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.035); } /* Símbolo PIX */ .shoptool-pix-card__symbol { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 32px; background: #ffffff; border-radius: 9px; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.055em; color: #ffffff; flex-shrink: 0; } /* Conteúdo central */ .shoptool-pix-card__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Pequena indicação */ .shoptool-pix-card__eyebrow { font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: 0.085em; text-transform: uppercase; color: #777777; } /* Mensagem principal */ .shoptool-pix-card__title { font-size: 13px; font-weight: 500; line-height: 1.35; color: #383838; } .shoptool-pix-card__title strong { font-weight: 800; color: #278533; } /* Preço PIX */ .shoptool-pix-card__price-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; } .shoptool-pix-card__price-label { font-size: 9px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #818181; } .shoptool-pix-card__price { font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: #151515; } /* Variante indisponível */ .shoptool-pix-card.is-unavailable { opacity: 0.65; } /* ========================================================= PDP — PIX NO MOBILE ========================================================= */ @media screen and (max-width: 480px) { #MainContent .main-product__info-container .shoptool-pix-card { grid-template-columns: auto minmax(0, 1fr); gap: 9px 11px; padding: 12px 13px; border-radius: 12px; } .shoptool-pix-card__symbol { width: 39px; height: 30px; border-radius: 8px; font-size: 9px; } .shoptool-pix-card__title { font-size: 12px; } .shoptool-pix-card__price-wrapper { grid-column: 2; align-items: flex-start; } .shoptool-pix-card__price { font-size: 15px; } #MainContent .main-product__info-container .shoptool-pix-card .shoptool-pix-card__symbol { background: #ffffff !important; border: 1px solid rgba(48, 153, 61, 0.18) !important; color: transparent !important; } } /* ========================================================= PDP — PIX DINÂMICO POR VARIANTE ========================================================= */ (function () { "use strict"; const CARD_SELECTOR = "[data-shoptool-pix-card]"; function getVariants(card) { const jsonElement = card.querySelector( "[data-shoptool-pix-variants]" ); if (!jsonElement) { return []; } try { return JSON.parse(jsonElement.textContent); } catch (error) { console.error( "Shoptool: não foi possível ler as variantes do PIX.", error ); return []; } } function getSelectedOptions(variantSelects) { const optionGroups = Array.from( variantSelects.querySelectorAll( ".product-form__input" ) ); return optionGroups .map(function (group) { const checkedRadio = group.querySelector( 'input[type="radio"]:checked' ); if (checkedRadio) { return checkedRadio.value; } const select = group.querySelector("select"); if (select) { return select.value; } return null; }) .filter(function (value) { return value !== null; }); } function findSelectedVariant(card, variants) { const productInfo = card.closest("product-info"); if (!productInfo) { return null; } const variantSelects = productInfo.querySelector("variant-selects"); if (variantSelects) { const selectedOptions = getSelectedOptions(variantSelects); if (selectedOptions.length > 0) { const matchedVariant = variants.find( function (variant) { return variant.options.every( function (option, index) { return option === selectedOptions[index]; } ); } ); if (matchedVariant) { return matchedVariant; } } } const variantInput = productInfo.querySelector( 'form[data-type="add-to-cart-form"] input[name="id"]' ); if (!variantInput || !variantInput.value) { return null; } return variants.find(function (variant) { return String(variant.id) === String(variantInput.value); }); } function formatMoney(card, cents) { const locale = card.dataset.locale || document.documentElement.lang || "pt-BR"; const currency = card.dataset.currency || "BRL"; try { return new Intl.NumberFormat(locale, { style: "currency", currency: currency }).format(cents / 100); } catch (error) { return "R$ " + (cents / 100) .toFixed(2) .replace(".", ","); } } function updatePixCard(card) { const variants = getVariants(card); if (variants.length === 0) { return; } const selectedVariant = findSelectedVariant(card, variants); if (!selectedVariant) { return; } const priceElement = card.querySelector( "[data-shoptool-pix-price]" ); if (!priceElement) { return; } const discount = Number(card.dataset.discount) || 0; const discountedPrice = Math.round( selectedVariant.price * ((100 - discount) / 100) ); priceElement.textContent = formatMoney(card, discountedPrice); card.classList.toggle( "is-unavailable", selectedVariant.available === false ); card.dataset.variantId = String(selectedVariant.id); } function initializePixCards(root) { const scope = root || document; scope .querySelectorAll(CARD_SELECTOR) .forEach(function (card) { updatePixCard(card); }); } function handleVariantChange(event) { const variantSelects = event.target.closest("variant-selects"); if (!variantSelects) { return; } const productInfo = variantSelects.closest("product-info"); if (!productInfo) { return; } const productInfoId = productInfo.id; requestAnimationFrame(function () { const currentProductInfo = document.getElementById(productInfoId) || productInfo; currentProductInfo .querySelectorAll(CARD_SELECTOR) .forEach(function (card) { updatePixCard(card); }); }); } if (document.readyState === "loading") { document.addEventListener( "DOMContentLoaded", function () { initializePixCards(document); } ); } else { initializePixCards(document); } document.addEventListener( "change", handleVariantChange ); document.addEventListener( "shopify:section:load", function (event) { initializePixCards(event.target); } ); })(); /* ================================================== SHOPTOOL — GARANTIAS E SEGURANÇA PREMIUM ================================================== */ #MainContent .main-product__info-container .shoptool-trust-card { box-sizing: border-box; width: 100%; margin-top: 26px !important; margin-bottom: 0 !important; padding: 16px; background: #ffffff; border: 1px solid #e9e9e9; border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.035); } .shoptool-trust-card__header { display: flex; flex-direction: column; gap: 3px; padding: 0 2px 13px; border-bottom: 1px solid #eeeeee; } .shoptool-trust-card__eyebrow { font-size: 9px; font-weight: 800; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: #ff6a00; } .shoptool-trust-card__heading { font-size: 15px; font-weight: 800; line-height: 1.3; color: #171717; } .shoptool-trust-card__list { display: flex; flex-direction: column; } .shoptool-trust-card__item { display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px; align-items: center; gap: 11px; min-width: 0; padding: 12px 2px; color: inherit; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; } .shoptool-trust-card__item + .shoptool-trust-card__item { border-top: 1px solid #f0f0f0; } .shoptool-trust-card__icon { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #ff6a00; background: rgba(255, 106, 0, 0.08); border-radius: 10px; } .shoptool-trust-card__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .shoptool-trust-card__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .shoptool-trust-card__content strong { font-size: 13px; font-weight: 750; line-height: 1.3; color: #242424; } .shoptool-trust-card__content small { font-size: 11px; font-weight: 400; line-height: 1.4; color: #747474; } .shoptool-trust-card__arrow { font-size: 22px; font-weight: 400; line-height: 1; color: #aaaaaa; transition: color 0.2s ease, transform 0.2s ease; } @media (hover: hover) { .shoptool-trust-card__item:hover { background: rgba(255, 106, 0, 0.025); } .shoptool-trust-card__item:hover .shoptool-trust-card__arrow { color: #ff6a00; transform: translateX(2px); } } .shoptool-trust-card__item:focus-visible { outline: 2px solid #ff6a00; outline-offset: 3px; border-radius: 8px; } @media screen and (max-width: 480px) { #MainContent .main-product__info-container .shoptool-trust-card { padding: 14px; border-radius: 12px; } .shoptool-trust-card__item { grid-template-columns: 36px minmax(0, 1fr) 12px; gap: 10px; padding: 11px 1px; } .shoptool-trust-card__icon { width: 36px; height: 36px; border-radius: 9px; } .shoptool-trust-card__icon svg { width: 19px; height: 19px; } .shoptool-trust-card__content strong { font-size: 12px; } .shoptool-trust-card__content small { font-size: 10.5px; } } /* Espaço entre PIX Premium e selos — desktop */ @media screen and (min-width: 750px) { #MainContent .main-product__info-container > .shoptool-pix-card + .shoptool-trust-card { margin-top: 26px !important; } } /* ========================================================= PDP — STICKY ADD TO CART PREMIUM V2 APENAS PERSONALIZAÇÃO VISUAL ========================================================= */ /* Não altera: - width - height - display - flex - position - transform da barra */ /* Fundo e acabamento da barra */ html body sticky-atc.sticky-atc { background: #ffffff !important; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(0, 0, 0, 0.08) !important; } /* Imagem do produto */ html body sticky-atc.sticky-atc .sticky-atc__image { background: #f7f7f7 !important; border-radius: 10px !important; box-shadow: 0 0 0 1px #eeeeee !important; } html body sticky-atc.sticky-atc .sticky-atc__image img { border-radius: 9px !important; } /* Título do produto */ html body sticky-atc.sticky-atc .sticky-atc__title { margin: 0 !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.25 !important; color: #171717 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Preço atual quando existe promoção */ html body sticky-atc.sticky-atc .sticky-atc__price .price-item--sale { font-size: 18px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: #ff6a00 !important; white-space: nowrap !important; } /* Preço atual quando não existe promoção */ html body sticky-atc.sticky-atc .sticky-atc__price .price__regular .price-item--regular { font-size: 18px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: #ff6a00 !important; white-space: nowrap !important; } /* Preço antigo */ html body sticky-atc.sticky-atc .sticky-atc__price .price__compare-price .price-item--regular { font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #777777 !important; text-decoration: line-through !important; text-decoration-thickness: 1px !important; white-space: nowrap !important; } /* Selo de desconto */ html body sticky-atc.sticky-atc .sticky-atc__price .price__badge-sale { padding: 4px 7px !important; background: #fff3e8 !important; color: #e85f00 !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px rgba(255, 106, 0, 0.20) !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } html body sticky-atc.sticky-atc .sticky-atc__price .price__badge-sale svg { color: #e85f00 !important; } /* Seletor de variante */ html body sticky-atc.sticky-atc .sticky-atc__variant-select { background: #ffffff !important; color: #222222 !important; border-radius: 10px !important; box-shadow: 0 0 0 1px #dedede !important; font-size: 13px !important; font-weight: 700 !important; transition: box-shadow 180ms ease, color 180ms ease; } html body sticky-atc.sticky-atc .sticky-atc__variant-select:focus { box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.32) !important; } /* Botão do sticky */ html body sticky-atc.sticky-atc .sticky-atc__button .main-product-atc { --color-button: 48, 153, 61 !important; --color-button-text: 255, 255, 255 !important; border-radius: 12px !important; box-shadow: 0 5px 14px rgba(48, 153, 61, 0.20) !important; transition: box-shadow 180ms ease, opacity 180ms ease !important; } html body sticky-atc.sticky-atc .sticky-atc__button .main-product-atc::before, html body sticky-atc.sticky-atc .sticky-atc__button .main-product-atc::after { border-radius: inherit !important; } /* Texto do botão */ html body sticky-atc.sticky-atc .sticky-atc__label__text { font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.02em !important; } /* Hover apenas em dispositivos com mouse */ @media (hover: hover) { html body sticky-atc.sticky-atc .sticky-atc__button .main-product-atc:not(:disabled):hover { --color-button: 38, 130, 52 !important; box-shadow: 0 7px 18px rgba(38, 130, 52, 0.26) !important; } } /* Foco pelo teclado */ html body sticky-atc.sticky-atc .sticky-atc__button .main-product-atc:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.42) !important; outline-offset: 3px !important; } /* Ajustes tipográficos no celular */ @media screen and (max-width: 749px) { html body sticky-atc.sticky-atc .sticky-atc__title { font-size: 13px !important; } html body sticky-atc.sticky-atc .sticky-atc__price .price-item--sale, html body sticky-atc.sticky-atc .sticky-atc__price .price__regular .price-item--regular { font-size: 16px !important; } html body sticky-atc.sticky-atc .sticky-atc__label__text { font-size: 14px !important; } } /* ========================================================= STICKY — LIMITE RESPONSIVO DO TÍTULO ========================================================= */ /* Faz a área das informações ocupar somente o espaço restante antes do botão. */ html body sticky-atc.sticky-atc .sticky-atc__left { flex: 1 1 0 !important; min-width: 0 !important; max-width: 100% !important; } /* Permite que o conteúdo interno realmente encolha. Sem min-width: 0, textos grandes podem ultrapassar os limites de um elemento flexível. */ html body sticky-atc.sticky-atc .sticky-atc__left__content { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* Mantém o botão sempre inteiro e visível */ html body sticky-atc.sticky-atc .sticky-atc__button { flex: 0 0 auto !important; } /* Corta o título exatamente no espaço disponível e acrescenta reticências. */ html body sticky-atc.sticky-atc .sticky-atc__title { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================================= PDP — PARCELAMENTO PREMIUM SHOPTOOL ========================================================= */ #MainContent .main-product__info-container .shoptool-installments { position: relative; isolation: isolate; display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box; margin: -4px 0 22px; padding: 14px 16px; background: linear-gradient( 135deg, #fff8f3 0%, #ffffff 72% ); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: 14px; overflow: hidden; color: #111111; box-shadow: 0 6px 18px rgba(17, 17, 17, 0.055); } /* Linha laranja lateral */ #MainContent .main-product__info-container .shoptool-installments::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient( 180deg, #ff8a32 0%, #ff6a00 100% ); } /* Elemento decorativo discreto */ #MainContent .main-product__info-container .shoptool-installments::after { content: ""; position: absolute; z-index: -1; top: -55px; right: -35px; width: 105px; height: 105px; border-radius: 50%; background: rgba(255, 106, 0, 0.055); pointer-events: none; } /* Ícone com as cores da Shoptool */ #MainContent .main-product__info-container .shoptool-installments__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; box-sizing: border-box; background: #111111; color: #ff6a00; border-radius: 11px; box-shadow: 0 4px 11px rgba(17, 17, 17, 0.15); } #MainContent .main-product__info-container .shoptool-installments__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; } /* Área dos textos */ #MainContent .main-product__info-container .shoptool-installments__content { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Informação principal */ #MainContent .main-product__info-container .shoptool-installments__title { margin: 0; color: #3d3d3d; font-size: 13.5px; font-weight: 500; line-height: 1.35; } #MainContent .main-product__info-container .shoptool-installments__title strong { color: #111111; font-size: 15.5px; font-weight: 800; letter-spacing: -0.015em; } #MainContent .main-product__info-container .shoptool-installments__title [data-shoptool-installment-value] { color: #e85f00; } /* Observação sobre os juros */ #MainContent .main-product__info-container .shoptool-installments__note { margin: 0; color: #767676; font-size: 11.5px; font-weight: 500; line-height: 1.4; } /* Ajustes para celular */ @media (max-width: 480px) { #MainContent .main-product__info-container .shoptool-installments { gap: 11px; margin-top: -2px; margin-bottom: 20px; padding: 12px 13px; border-radius: 13px; } #MainContent .main-product__info-container .shoptool-installments__icon { flex-basis: 39px; width: 39px; height: 39px; border-radius: 10px; } #MainContent .main-product__info-container .shoptool-installments__icon svg { width: 19px; height: 19px; } #MainContent .main-product__info-container .shoptool-installments__title { font-size: 12.5px; } #MainContent .main-product__info-container .shoptool-installments__title strong { font-size: 14.5px; } #MainContent .main-product__info-container .shoptool-installments__note { font-size: 10.8px; } } /* ========================================================= PDP — SELETOR DE QUANTIDADE PREMIUM ========================================================= */ /* Espaçamento do bloco */ #MainContent .main-product__info-container .product-form__quantity { width: fit-content; margin-top: 18px !important; margin-bottom: 16px !important; } /* Título "Quantidade" */ #MainContent .main-product__info-container .product-form__quantity .quantity__label { display: block; margin-bottom: 8px; color: #222222; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.025em; } /* Estrutura do seletor */ #MainContent .main-product__info-container .main-quantity { display: grid; grid-template-columns: 44px 52px 44px; align-items: center; width: 140px; min-height: 46px; box-sizing: border-box; background: #ffffff; border: 1px solid rgba(255, 106, 0, 0.28); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(17, 17, 17, 0.055); transition: border-color 160ms ease, box-shadow 160ms ease; } /* Remove contornos internos criados pelo tema */ #MainContent .main-product__info-container .main-quantity::before, #MainContent .main-product__info-container .main-quantity::after { display: none !important; } /* Botões de menos e mais */ #MainContent .main-product__info-container .main-quantity .quantity__button { width: 44px; height: 46px; min-height: 46px; padding: 0; background: #fff8f3; color: #e85f00; border: 0; transition: background-color 160ms ease, color 160ms ease; } /* Ícones de menos e mais */ #MainContent .main-product__info-container .main-quantity .quantity__button svg { width: 13px; height: 13px; color: inherit; } /* Número central */ #MainContent .main-product__info-container .main-quantity .quantity__input { width: 52px; height: 46px; min-height: 46px; padding: 0; background: #ffffff; color: #111111; border: 0; font-size: 15px; font-weight: 800; line-height: 46px; text-align: center; box-shadow: none; } /* Hover somente para computadores com mouse */ @media (hover: hover) { #MainContent .main-product__info-container .main-quantity .quantity__button:hover { background: #ff6a00; color: #ffffff; } } /* Destaque durante a interação */ #MainContent .main-product__info-container .main-quantity:focus-within { border-color: #ff6a00; box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.13), 0 5px 14px rgba(17, 17, 17, 0.06); } /* Ajustes para celular */ @media (max-width: 480px) { #MainContent .main-product__info-container .product-form__quantity { margin-top: 16px !important; margin-bottom: 14px !important; } #MainContent .main-product__info-container .main-quantity { grid-template-columns: 46px 54px 46px; width: 146px; min-height: 48px; } #MainContent .main-product__info-container .main-quantity .quantity__button { width: 46px; height: 48px; min-height: 48px; } #MainContent .main-product__info-container .main-quantity .quantity__input { width: 54px; height: 48px; min-height: 48px; line-height: 48px; } } /* ========================================================= SHOPTOOL — CURADORIA DE PRODUTOS PREMIUM ========================================================= */ /* Aproxima os cards do título e ajusta o final da seção */ .shoptool-curadoria .collection { padding-top: 12px !important; padding-bottom: 72px !important; } /* Mantém todos os cards com a mesma altura */ .shoptool-curadoria .splide__list { align-items: stretch; } .shoptool-curadoria .splide__slide, .shoptool-curadoria .splide__slide__container, .shoptool-curadoria .product-card-wrapper { height: 100%; } /* Estrutura externa do card */ .shoptool-curadoria .product-card-wrapper > .card { height: 100%; box-sizing: border-box; background: #ffffff; border: 1px solid #e9e9e9; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(17, 17, 17, 0.065); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* ========================================================= IMAGENS ========================================================= */ /* Força proporção quadrada em todos os produtos */ .shoptool-curadoria .product-card-wrapper .card__inner { --ratio-percent: 100% !important; background: #f8f8f8; border-radius: 0; overflow: hidden; } /* Área da imagem */ .shoptool-curadoria .product-card-wrapper .card__media, .shoptool-curadoria .product-card-wrapper .card__media .media { width: 100%; height: 100%; background: #f8f8f8; } /* Padronização da imagem */ .shoptool-curadoria .product-card-wrapper .card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 300ms ease; } /* ========================================================= INFORMAÇÕES DO PRODUTO ========================================================= */ /* Espaçamento interno abaixo da imagem */ .shoptool-curadoria .product-card-wrapper > .card > .card__content { flex-grow: 1; padding: 15px 16px 18px; background: #ffffff; } /* Remove espaçamentos nativos excessivos */ .shoptool-curadoria .product-card-wrapper > .card > .card__content .card__information { display: flex; flex-direction: column; height: 100%; padding: 0; } /* ========================================================= TÍTULO EM DUAS LINHAS ========================================================= */ .shoptool-curadoria .product-card-wrapper .card__heading { margin: 0 0 10px; } /* Limita o título visualmente a duas linhas */ .shoptool-curadoria .product-card-wrapper .card__heading .full-unstyled-link { display: -webkit-box; min-height: 42px; overflow: hidden; color: #222222; font-size: 14px; font-weight: 650; line-height: 1.48; text-align: left; letter-spacing: -0.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: color 160ms ease; } /* ========================================================= PREÇOS ========================================================= */ .shoptool-curadoria .product-card-wrapper .card-information { margin-top: auto; text-align: left; } /* Organiza preço atual e preço anterior */ .shoptool-curadoria .product-card-wrapper .price__container { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } /* Preço principal */ .shoptool-curadoria .product-card-wrapper .price-item--regular, .shoptool-curadoria .product-card-wrapper .price-item--sale.price-item--last { color: #e85f00; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; } /* Preço anterior */ .shoptool-curadoria .product-card-wrapper .price__compare-price .price-item { color: #8a8a8a; font-size: 12.5px; font-weight: 500; line-height: 1.2; text-decoration-thickness: 1px; } /* Evita margens estranhas criadas pelo tema */ .shoptool-curadoria .product-card-wrapper .price { margin-top: 0; } /* ========================================================= ETIQUETAS ========================================================= */ /* Etiquetas de promoção e produto esgotado */ .shoptool-curadoria .product-card-wrapper .card__badge { top: 12px; right: auto; bottom: auto; left: 12px; } /* Aparência padrão da etiqueta */ .shoptool-curadoria .product-card-wrapper .badge { padding: 6px 10px; background: #30993d; color: #ffffff; border: 0; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(48, 153, 61, 0.2); } /* Esgotado fica neutro, sem parecer uma promoção */ .shoptool-curadoria .product-card-wrapper .card__sale-badge { background: #555555; color: #ffffff; box-shadow: 0 4px 10px rgba(17, 17, 17, 0.16); } /* ========================================================= INTERAÇÃO NO DESKTOP ========================================================= */ @media (hover: hover) { .shoptool-curadoria .product-card-wrapper > .card:hover { transform: translateY(-4px); border-color: rgba(255, 106, 0, 0.28); box-shadow: 0 12px 28px rgba(17, 17, 17, 0.11); } .shoptool-curadoria .product-card-wrapper > .card:hover .card__media img { transform: scale(1.035); } .shoptool-curadoria .product-card-wrapper > .card:hover .card__heading .full-unstyled-link { color: #e85f00; } } /* Navegação por teclado */ .shoptool-curadoria .product-card-wrapper .full-unstyled-link:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.35); outline-offset: 3px; border-radius: 4px; } /* ========================================================= AJUSTES PARA CELULAR ========================================================= */ @media (max-width: 749px) { .shoptool-curadoria .collection { padding-top: 8px !important; padding-bottom: 52px !important; } .shoptool-curadoria .product-grid { --gap-mobile: 12px !important; } .shoptool-curadoria .product-card-wrapper > .card { border-radius: 13px; box-shadow: 0 4px 14px rgba(17, 17, 17, 0.06); } .shoptool-curadoria .product-card-wrapper > .card > .card__content { padding: 12px 11px 14px; } .shoptool-curadoria .product-card-wrapper .card__heading { margin-bottom: 8px; } .shoptool-curadoria .product-card-wrapper .card__heading .full-unstyled-link { min-height: 39px; font-size: 12.5px; line-height: 1.5; } .shoptool-curadoria .product-card-wrapper .price-item--regular, .shoptool-curadoria .product-card-wrapper .price-item--sale.price-item--last { font-size: 15px; } .shoptool-curadoria .product-card-wrapper .price__compare-price .price-item { font-size: 11.5px; } .shoptool-curadoria .product-card-wrapper .card__badge { top: 8px; left: 8px; } .shoptool-curadoria .product-card-wrapper .badge { padding: 5px 8px; font-size: 9px; } } /* ========================================================= PDP — PREÇO ANTERIOR PREMIUM ========================================================= */ /* Organiza preço anterior e preço atual verticalmente */ #MainContent .main-product__info-container .price .price__sale { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } /* Coloca o preço anterior acima do preço atual */ #MainContent .main-product__info-container .price .price__compare-price { order: 1; display: block; margin: 0; } /* Aparência do preço anterior */ #MainContent .main-product__info-container .price .price__compare-price .price-item { margin: 0; color: #8b8b8b; font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-decoration-line: line-through; text-decoration-color: #a6a6a6; text-decoration-thickness: 1.5px; } /* Preço atual abaixo do preço anterior */ #MainContent .main-product__info-container .price .price-item--sale.price-item--last { order: 2; margin: 0; color: #ff6a00; font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; } /* Evita espaçamentos nativos desnecessários */ #MainContent .main-product__info-container .price .price__container { margin: 0; } /* Ajustes para celular */ @media (max-width: 480px) { #MainContent .main-product__info-container .price .price__sale { gap: 5px; } #MainContent .main-product__info-container .price .price__compare-price .price-item { font-size: 14.5px; } #MainContent .main-product__info-container .price .price-item--sale.price-item--last { font-size: 27px; } } /* ========================================================= PDP — CORREÇÃO DO PREÇO DUPLICADO POR VARIANTE ========================================================= */ /* Sem promoção: esconde completamente a estrutura promocional */ #MainContent .main-product__info-container .price:not(.price--on-sale) .price__sale { display: none !important; } /* Sem promoção: mantém somente o preço normal */ #MainContent .main-product__info-container .price:not(.price--on-sale) .price__regular { display: block !important; } /* Sem promoção: garante o visual laranja do preço normal */ #MainContent .main-product__info-container .price:not(.price--on-sale) .price__regular .main-price { margin: 0; color: #ff6a00; font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; } /* Sem promoção: oculta a etiqueta de economia */ #MainContent .main-product__info-container .price:not(.price--on-sale) .price__badge-sale { display: none !important; } /* Com promoção: esconde a estrutura de preço normal */ #MainContent .main-product__info-container .price.price--on-sale .price__regular { display: none !important; } /* Com promoção: mostra preço anterior e preço atual */ #MainContent .main-product__info-container .price.price--on-sale .price__sale { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; } /* Ajuste do preço normal no celular */ @media (max-width: 480px) { #MainContent .main-product__info-container .price:not(.price--on-sale) .price__regular .main-price { font-size: 27px; } } /* ========================================================= HOME — ETIQUETA DE DESCONTO DO FEATURED PRODUCT ========================================================= */ .section-featured-product .product-page-price .price__badge-sale { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin-top: 10px; padding: 6px 11px; background: #30993d !important; color: #ffffff !important; border: 0 !important; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0.035em; text-transform: uppercase; box-shadow: 0 4px 11px rgba(48, 153, 61, 0.22); } /* Ícone da etiqueta */ .section-featured-product .product-page-price .price__badge-sale .icon { width: 12px; height: 12px; color: #ffffff !important; } /* Garante que o desenho interno fique branco */ .section-featured-product .product-page-price .price__badge-sale .icon path { fill: currentColor !important; } /* Sem promoção válida: não exibe a etiqueta */ .section-featured-product .product-page-price .price:not(.price--on-sale) .price__badge-sale { display: none !important; } /* Esgotado permanece neutro */ .section-featured-product .product-page-price .price__badge-sold-out { padding: 6px 11px; background: #555555 !important; color: #ffffff !important; border: 0 !important; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; } /* Ajuste para celular */ @media (max-width: 480px) { .section-featured-product .product-page-price .price__badge-sale, .section-featured-product .product-page-price .price__badge-sold-out { margin-top: 8px; padding: 5px 9px; font-size: 9.5px; } } /* ========================================================= CHECKOUT MOBILE — CORREÇÃO DOS CAMPOS DE IDENTIFICAÇÃO ========================================================= */ @media screen and (max-width: 749px) { #form-signup .floating-input-label { position: relative !important; } #form-signup .floating-input-label label { pointer-events: none !important; } #form-signup .floating-input-label input, #form-signup .floating-input-label .input { position: relative !important; z-index: 2 !important; pointer-events: auto !important; touch-action: manipulation !important; cursor: text !important; -webkit-user-select: text !important; user-select: text !important; } } /* ========================================================= PDP — CONTATO PELO WHATSAPP ========================================================= */ .shoptool-whatsapp-support { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 20px; width: calc(100% - 30px); max-width: 1200px; margin: 12px auto 72px; padding: 26px 28px; box-sizing: border-box; background: radial-gradient( circle at 92% 15%, rgba(37, 211, 102, 0.12), transparent 29% ), linear-gradient( 135deg, #111111, #1a1a1a ); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; box-shadow: 0 16px 38px rgba(17, 17, 17, 0.14); } /* Ícone */ .shoptool-whatsapp-support__icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; background: #25d366; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; box-shadow: 0 7px 18px rgba(37, 211, 102, 0.24); } .shoptool-whatsapp-support__icon svg { display: block; width: 29px; height: 29px; fill: currentColor; stroke: none; } /* Conteúdo */ .shoptool-whatsapp-support__content { min-width: 0; } .shoptool-whatsapp-support__eyebrow { margin: 0 0 5px; color: #ff8a32; font-size: 10.5px; font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } .shoptool-whatsapp-support__title { margin: 0; color: #ffffff; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; } .shoptool-whatsapp-support__text { margin: 6px 0 0; color: rgba(255, 255, 255, 0.66); font-size: 13px; line-height: 1.5; } /* Botão */ .shoptool-whatsapp-support__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; box-sizing: border-box; background: #25d366; color: #ffffff; border: 0; border-radius: 12px; font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: 0 7px 18px rgba(37, 211, 102, 0.2); transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } .shoptool-whatsapp-support__button span { font-size: 18px; transition: transform 180ms ease; } /* Hover no computador */ @media (hover: hover) { .shoptool-whatsapp-support__button:hover { transform: translateY(-2px); background: #20bd5a; color: #ffffff; box-shadow: 0 10px 22px rgba(37, 211, 102, 0.26); } .shoptool-whatsapp-support__button:hover span { transform: translateX(3px); } } /* Navegação por teclado */ .shoptool-whatsapp-support__button:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.55); outline-offset: 3px; } /* Tablet */ @media screen and (max-width: 850px) { .shoptool-whatsapp-support { grid-template-columns: 54px minmax(0, 1fr); } .shoptool-whatsapp-support__icon { width: 54px; height: 54px; } .shoptool-whatsapp-support__button { grid-column: 1 / -1; width: 100%; } } /* Celular */ @media screen and (max-width: 480px) { .shoptool-whatsapp-support { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; width: calc(100% - 24px); margin-top: 8px; margin-bottom: 48px; padding: 20px 17px; border-radius: 15px; } .shoptool-whatsapp-support__icon { align-self: start; width: 46px; height: 46px; border-radius: 50%; } .shoptool-whatsapp-support__icon svg { width: 25px; height: 25px; } .shoptool-whatsapp-support__eyebrow { font-size: 9px; } .shoptool-whatsapp-support__title { font-size: 17px; } .shoptool-whatsapp-support__text { grid-column: 1 / -1; font-size: 12px; } .shoptool-whatsapp-support__button { grid-column: 1 / -1; min-height: 49px; margin-top: 4px; } } /* ========================================================= PDP — WHATSAPP FLUTUANTE SHOPTOOL ========================================================= */ .shoptool-whatsapp-float { position: fixed; z-index: 90; --shoptool-float-gap: 18px; right: var(--shoptool-float-gap); bottom: calc( var(--shoptool-float-gap) + var(--sticky-atc-offset, 0px) ); display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; box-sizing: border-box; background: #25d366; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; text-decoration: none; box-shadow: 0 8px 24px rgba(17, 17, 17, 0.2), 0 5px 16px rgba(37, 211, 102, 0.25); opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: bottom 220ms ease, opacity 200ms ease, visibility 200ms ease, transform 200ms ease, background-color 180ms ease, box-shadow 180ms ease; } /* Ícone */ .shoptool-whatsapp-float svg { display: block; width: 29px; height: 29px; fill: currentColor; } /* Texto auxiliar no desktop */ .shoptool-whatsapp-float::before { content: "Fale conosco"; position: absolute; top: 50%; right: calc(100% + 11px); padding: 8px 10px; background: #111111; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 5px 14px rgba(17, 17, 17, 0.16); opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(5px); pointer-events: none; transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease; } /* Estado oculto quando o bloco grande estiver visível */ .shoptool-whatsapp-float.is-hidden { opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9); pointer-events: none; } /* Hover somente no computador */ @media (hover: hover) { .shoptool-whatsapp-float:hover { background: #20bd5a; color: #ffffff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px rgba(17, 17, 17, 0.22), 0 8px 20px rgba(37, 211, 102, 0.29); } .shoptool-whatsapp-float:hover::before { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } } /* Navegação por teclado */ .shoptool-whatsapp-float:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.55); outline-offset: 4px; } /* Celular */ @media screen and (max-width: 749px) { .shoptool-whatsapp-float { --shoptool-float-gap: 14px; right: var(--shoptool-float-gap); bottom: calc( var(--shoptool-float-gap) + env(safe-area-inset-bottom, 0px) + var(--sticky-atc-offset, 0px) ); width: 48px; height: 48px; box-shadow: 0 7px 20px rgba(17, 17, 17, 0.18), 0 4px 13px rgba(37, 211, 102, 0.23); } .shoptool-whatsapp-float svg { width: 25px; height: 25px; } /* Não mostra balão de texto no celular */ .shoptool-whatsapp-float::before { display: none; } } /* ========================================================= SHOPTOOL — SCROLL TO TOP DINÂMICO ========================================================= */ /* WhatsApp no desktop: - distância inferior: 18px - altura: 54px - espaço entre os botões: 12px 18 + 54 + 12 = 84px */ html body #shopify-section-scroll-to-top-btn button.scroll-to-top-btn-scroll-to-top-btn { right: 25px !important; bottom: calc( 84px + var(--sticky-atc-offset, 0px) ) !important; z-index: 89 !important; transition: bottom 220ms ease, transform 180ms ease, box-shadow 180ms ease !important; } /* Mobile */ @media screen and (max-width: 749px) { /* WhatsApp no mobile: - distância inferior: 14px - altura: 48px - espaço entre os botões: 12px 14 + 48 + 12 = 74px */ html body #shopify-section-scroll-to-top-btn button.scroll-to-top-btn-scroll-to-top-btn { right: 18px !important; bottom: calc( 74px + env(safe-area-inset-bottom, 0px) + var(--sticky-atc-offset, 0px) ) !important; } } /* ========================================================= SHOPTOOL — CARRINHO VAZIO PREMIUM ========================================================= */ cart-items.is-empty .cart__warnings { padding: 54px 18px 72px !important; } /* Cartão principal */ .shoptool-empty-cart { box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto; padding: 42px 34px; background: #ffffff; border: 1px solid #ededed; border-radius: 20px; box-shadow: 0 14px 38px rgba(17, 17, 17, 0.07); text-align: center; } /* Ícone */ .shoptool-empty-cart__icon { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin: 0 auto 20px; background: #fff3e8; color: #ff6a00; border: 1px solid rgba(255, 106, 0, 0.18); border-radius: 50%; } .shoptool-empty-cart__icon svg { width: 32px; height: 32px; } /* Texto superior */ .shoptool-empty-cart__eyebrow { margin: 0 0 8px; color: #ff6a00; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } /* Título */ .shoptool-empty-cart .shoptool-empty-cart__title { display: block; margin: 0 0 12px !important; color: #171717; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; } /* Descrição */ .shoptool-empty-cart__text { max-width: 390px; margin: 0 auto 26px; color: #666666; font-size: 15px; line-height: 1.55; } /* Botão */ .shoptool-empty-cart__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 25px; background: #ff6a00; color: #ffffff; border-radius: 14px; font-size: 14px; font-weight: 800; line-height: 1; letter-spacing: 0.025em; text-decoration: none; box-shadow: 0 7px 18px rgba(255, 106, 0, 0.22); transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } .shoptool-empty-cart__button span { font-size: 18px; transition: transform 180ms ease; } /* Hover */ @media (hover: hover) { .shoptool-empty-cart__button:hover { background: #e85f00; color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 106, 0, 0.27); } .shoptool-empty-cart__button:hover span { transform: translateX(3px); } } /* Teclado */ .shoptool-empty-cart__button:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.35); outline-offset: 4px; } /* Informação sobre a conta */ .shoptool-empty-cart__note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 20px 0 0; color: #606060; font-size: 12px; line-height: 1.4; } .shoptool-empty-cart__note span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #eaf7ed; color: #30993d; border-radius: 50%; font-size: 11px; font-weight: 800; } /* Mobile */ @media screen and (max-width: 749px) { cart-items.is-empty .cart__warnings { padding: 34px 14px 54px !important; } .shoptool-empty-cart { padding: 34px 20px; border-radius: 16px; } .shoptool-empty-cart__icon { width: 58px; height: 58px; margin-bottom: 18px; } .shoptool-empty-cart__icon svg { width: 28px; height: 28px; } .shoptool-empty-cart .shoptool-empty-cart__title { font-size: 25px; } .shoptool-empty-cart__text { font-size: 14px; } .shoptool-empty-cart__button { width: 100%; padding: 0 20px; } } /* ========================================================= SHOPTOOL — CATÁLOGO / CURADORIA PREMIUM ========================================================= */ /* Oculta o banner nativo “Produtos” somente quando o novo cabeçalho da Curadoria estiver presente. */ body:has(.shoptool-catalogo__hero) .collection-hero { display: none; } /* Fundo geral */ .shoptool-catalogo { background: linear-gradient( 180deg, #ffffff 0, #fafafa 260px, #fafafa 100% ); } /* ========================================================= CABEÇALHO ========================================================= */ .shoptool-catalogo__hero { padding-top: 68px; padding-bottom: 38px; text-align: center; } .shoptool-catalogo__eyebrow { margin: 0 0 12px; color: #ff6a00; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.13em; text-transform: uppercase; } .shoptool-catalogo__title { margin: 0; color: #171717; font-size: clamp(34px, 5vw, 54px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; } .shoptool-catalogo__description { max-width: 680px; margin: 18px auto 0; color: #666666; font-size: 16px; line-height: 1.65; } /* Diferenciais compactos */ .shoptool-catalogo__benefits { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; } .shoptool-catalogo__benefits li { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; background: #ffffff; color: #4f4f4f; border: 1px solid #e8e8e8; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 4px 12px rgba(17, 17, 17, 0.04); } .shoptool-catalogo__benefits span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #eaf7ed; color: #30993d; border-radius: 50%; font-size: 10px; font-weight: 800; } /* ========================================================= FILTROS E ORDENAÇÃO ========================================================= */ .shoptool-catalogo #main-collection-filters { margin-bottom: 28px; } .shoptool-catalogo .facets-container { padding: 12px 16px; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 16px; box-shadow: 0 7px 22px rgba(17, 17, 17, 0.05); } .shoptool-catalogo .facets__summary { padding: 9px 12px; background: #f8f8f8; border-radius: 10px; font-weight: 700; transition: background-color 180ms ease, color 180ms ease; } @media (hover: hover) { .shoptool-catalogo .facets__summary:hover { background: #fff3e8; color: #e85f00; } } /* ========================================================= GRADE DE PRODUTOS ========================================================= */ .shoptool-catalogo #product-grid { align-items: stretch; --grid-desktop-horizontal-spacing: 22px; --grid-desktop-vertical-spacing: 30px; } .shoptool-catalogo #product-grid > .grid__item { display: flex; } .shoptool-catalogo #product-grid .product-card-wrapper { width: 100%; height: 100%; } /* ========================================================= PAGINAÇÃO ========================================================= */ .shoptool-catalogo .pagination-wrapper { margin-top: 52px; } .shoptool-catalogo .pagination__item { border-radius: 50%; transition: background-color 180ms ease, color 180ms ease; } .shoptool-catalogo .pagination__item--current { background: #fff3e8; color: #e85f00; font-weight: 800; } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { .shoptool-catalogo__hero { padding-top: 42px; padding-bottom: 28px; } .shoptool-catalogo__title { font-size: 34px; } .shoptool-catalogo__description { margin-top: 14px; font-size: 14px; line-height: 1.6; } .shoptool-catalogo__benefits { gap: 8px; margin-top: 20px; } .shoptool-catalogo__benefits li { padding: 8px 10px; font-size: 10.5px; } .shoptool-catalogo #main-collection-filters { margin-bottom: 20px; } .shoptool-catalogo .facets-container { padding: 10px 12px; border-radius: 13px; } .shoptool-catalogo #product-grid { --grid-mobile-horizontal-spacing: 12px; --grid-mobile-vertical-spacing: 22px; } } /* ========================================================= SHOPTOOL — AJUSTE DO TOPO DA CURADORIA ========================================================= */ /* Aumenta a especificidade para impedir que o .page-width nativo remova o espaçamento. */ .shoptool-catalogo .shoptool-catalogo__hero { padding-top: 72px !important; padding-bottom: 40px !important; } /* ========================================================= CURADORIA COMPACTA NO MOBILE ========================================================= */ @media screen and (max-width: 749px) { /* Respiro suficiente abaixo do header, mas sem deixar a apresentação muito alta. */ .shoptool-catalogo .shoptool-catalogo__hero { padding-top: 32px !important; padding-bottom: 22px !important; } /* Texto superior menor */ .shoptool-catalogo .shoptool-catalogo__eyebrow { margin-bottom: 8px; font-size: 9.5px; letter-spacing: 0.11em; } /* Título mais compacto */ .shoptool-catalogo .shoptool-catalogo__title { font-size: 30px; line-height: 1.08; letter-spacing: -0.03em; } /* Descrição mais confortável no celular */ .shoptool-catalogo .shoptool-catalogo__description { max-width: 340px; margin-top: 12px; font-size: 13.5px; line-height: 1.5; } /* Os diferenciais permanecem no desktop, mas são removidos no celular para que os produtos apareçam mais rapidamente. */ .shoptool-catalogo .shoptool-catalogo__benefits { display: none !important; } } /* ========================================================= SHOPTOOL — DIFERENCIAIS PREMIUM DA HOME ========================================================= */ .st-home-trust { padding: 86px 0; background: linear-gradient( 180deg, #ffffff 0%, #fafafa 100% ); overflow: hidden; } .st-home-trust .st-container { box-sizing: border-box; width: calc(100% - 40px); max-width: 1140px; margin: 0 auto; } /* ========================================================= CABEÇALHO ========================================================= */ .st-home-trust__header { max-width: 760px; margin: 0 auto 40px; text-align: center; } .st-home-trust__eyebrow { margin: 0 0 12px; color: #ff6a00; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .st-home-trust__title { margin: 0; color: #171717; font-size: clamp(32px, 4vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; } .st-home-trust__description { max-width: 620px; margin: 17px auto 0; color: #666666; font-size: 15px; line-height: 1.65; } /* ========================================================= GRADE ========================================================= */ .st-home-trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* ========================================================= CARDS ========================================================= */ .st-home-trust__card { position: relative; box-sizing: border-box; min-width: 0; min-height: 210px; padding: 28px; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 18px; box-shadow: 0 8px 24px rgba(17, 17, 17, 0.055); overflow: hidden; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } /* Detalhe superior da marca */ .st-home-trust__card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: linear-gradient( 90deg, #ff6a00, #ff9a4a ); border-radius: 0 0 999px 999px; opacity: 0.9; } /* Ícones */ .st-home-trust__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 20px; background: #fff3e8; color: #e85f00; border: 1px solid rgba(255, 106, 0, 0.18); border-radius: 14px; box-shadow: 0 5px 14px rgba(255, 106, 0, 0.09); } .st-home-trust__icon svg { width: 27px; height: 27px; } /* Conteúdo */ .st-home-trust__card-title { margin: 0 0 9px; color: #1c1c1c; font-size: 18px; font-weight: 800; line-height: 1.25; } .st-home-trust__card-text { margin: 0; color: #686868; font-size: 14px; line-height: 1.6; } /* Interação no desktop */ @media (hover: hover) and (pointer: fine) { .st-home-trust__card:hover { transform: translateY(-4px); border-color: rgba(255, 106, 0, 0.28); box-shadow: 0 14px 32px rgba(17, 17, 17, 0.09); } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { .st-home-trust { padding: 52px 0; } .st-home-trust .st-container { width: calc(100% - 28px); } /* Cabeçalho mais compacto */ .st-home-trust__header { margin-bottom: 25px; text-align: left; } .st-home-trust__eyebrow { margin-bottom: 9px; font-size: 9.5px; } .st-home-trust__title { font-size: 28px; line-height: 1.14; } .st-home-trust__description { margin-top: 12px; font-size: 13.5px; line-height: 1.55; } /* Cards horizontais e compactos */ .st-home-trust__grid { grid-template-columns: 1fr; gap: 12px; } .st-home-trust__card { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; min-height: 0; padding: 16px; border-radius: 14px; box-shadow: 0 5px 16px rgba(17, 17, 17, 0.05); } .st-home-trust__card::before { top: 12px; bottom: 12px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 999px 999px 0; } .st-home-trust__icon { width: 44px; height: 44px; margin: 0; border-radius: 12px; } .st-home-trust__icon svg { width: 23px; height: 23px; } .st-home-trust__card-title { margin-bottom: 4px; font-size: 15.5px; } .st-home-trust__card-text { font-size: 12.5px; line-height: 1.48; } } /* ========================================================= SHOPTOOL — COR DO ÍCONE MEUS PEDIDOS ========================================================= */ .header-wrapper .header__icon--orders, .header-wrapper .header__icon--orders .icon-orders, .header-wrapper .header__icon--orders .icon-orders path { color: #ffffff !important; fill: #ffffff !important; } /* ========================================================= SHOPTOOL — MEUS PEDIDOS NO MENU MOBILE ========================================================= */ .menu-drawer__utility-links .menu-drawer__account.menu-drawer__orders { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; max-width: 100% !important; gap: 10px !important; white-space: nowrap !important; } /* Tamanho fixo da sacola */ .menu-drawer__utility-links .menu-drawer__orders .icon-orders { flex: 0 0 22px !important; width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; margin: 0 !important; color: currentColor !important; fill: currentColor !important; } /* Impede que “Meus pedidos” seja quebrado */ .menu-drawer__utility-links .menu-drawer__orders span { display: block !important; width: auto !important; min-width: max-content !important; line-height: 1.2 !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } /* ========================================================= SHOPTOOL — MENU MOBILE PREMIUM ========================================================= */ @media screen and (max-width: 989px) { /* Painel principal */ #menu-drawer.menu-drawer { width: min(88vw, 360px) !important; max-width: min(88vw, 360px) !important; background: #111111 !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 18px 0 45px rgba(0, 0, 0, 0.32) !important; } /* Mantém o fundo escuro em todas as camadas */ #menu-drawer .menu-drawer__inner-container, #menu-drawer .menu-drawer__navigation-container, #menu-drawer .menu-drawer__submenu, #menu-drawer .menu-drawer__inner-submenu { background: #111111 !important; } /* Cabeçalho: título e botão fechar */ #menu-drawer .menu-drawer__title-and-close-btn { min-height: 68px !important; padding: 12px 18px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important; } #menu-drawer .menu-drawer__title { margin: 0 !important; color: #ffffff !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.2 !important; } #menu-drawer .menu-drawer__close-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; margin: 0 !important; padding: 10px !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.06) !important; border-radius: 10px !important; } #menu-drawer .menu-drawer__close-btn svg, #menu-drawer .menu-drawer__close-btn svg path { color: #ffffff !important; fill: #ffffff !important; } /* Navegação principal */ #menu-drawer .menu-drawer__navigation { padding: 14px 12px 8px !important; } #menu-drawer .menu-drawer__menu > li + li { margin-top: 4px !important; } #menu-drawer .menu-drawer__menu-item { min-height: 48px !important; padding: 12px 14px !important; color: rgba(255, 255, 255, 0.88) !important; background: transparent !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0.01em !important; } /* Página atualmente selecionada */ #menu-drawer .menu-drawer__menu-item--active { color: #ff7a1a !important; background: rgba(255, 106, 0, 0.12) !important; text-decoration: none !important; } /* Área inferior */ #menu-drawer .menu-drawer__utility-links { padding: 18px 20px 24px !important; background: #151515 !important; border-top: 1px solid rgba(255, 255, 255, 0.09) !important; } /* Botão Meus pedidos */ #menu-drawer .menu-drawer__account.menu-drawer__orders { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; padding: 0 14px !important; color: #ffffff !important; background: rgba(255, 106, 0, 0.08) !important; border: 1px solid rgba(255, 106, 0, 0.35) !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; } #menu-drawer .menu-drawer__orders .icon-orders { color: #ff6a00 !important; fill: #ff6a00 !important; } /* Redes sociais */ #menu-drawer .menu-drawer__utility-links .list-social { display: flex !important; justify-content: flex-start !important; gap: 8px !important; margin: 14px 0 0 !important; } #menu-drawer .list-social__link { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; padding: 9px !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; } #menu-drawer .list-social__link svg { width: 18px !important; height: 18px !important; } } /* ========================================================= SHOPTOOL — BANNER DE COOKIES PREMIUM ========================================================= */ /* Cartão principal */ #shopify-pc__banner.shopify-pc__banner__dialog { position: fixed !important; top: auto !important; right: auto !important; bottom: 24px !important; left: 50% !important; width: calc(100% - 48px) !important; max-width: 780px !important; max-height: calc(100dvh - 48px) !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%) !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid rgba(17, 17, 17, 0.1) !important; border-radius: 20px !important; background-color: rgba(255, 255, 255, 0.98) !important; color: #171717 !important; box-shadow: 0 18px 50px rgba(17, 17, 17, 0.18), 0 3px 10px rgba(17, 17, 17, 0.08) !important; font-family: inherit !important; z-index: 2147483647 !important; } /* Organização interna no desktop */ #shopify-pc__banner .shopify-pc__banner__wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) 270px !important; align-items: center !important; gap: 26px !important; width: 100% !important; margin: 0 !important; padding: 24px 26px !important; box-sizing: border-box !important; } /* Área do conteúdo */ #shopify-pc__banner .shopify-pc__banner__body { min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Título */ #shopify-pc__banner__body-title { margin: 0 0 8px !important; color: #111111 !important; font-family: inherit !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } /* Texto */ #shopify-pc__banner .shopify-pc__banner__body, #shopify-pc__banner .shopify-pc__banner__body p { color: #555555 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0 !important; } #shopify-pc__banner .shopify-pc__banner__body p { margin: 0 !important; } /* Link da política */ #shopify-pc__banner .shopify-pc__banner__body a { color: #d95600 !important; font-weight: 700 !important; text-decoration-line: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; } /* Organização dos botões */ #shopify-pc__banner .shopify-pc__banner__btns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Configuração comum dos botões */ #shopify-pc__banner .shopify-pc__banner__btns button { width: 100% !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 10px 14px !important; border-radius: 12px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 750 !important; line-height: 1.2 !important; text-align: center !important; cursor: pointer !important; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important; } /* Aceitar */ #shopify-pc__banner__btn-accept { grid-column: 1 !important; grid-row: 1 !important; border: 1px solid #ff6a00 !important; background-color: #ff6a00 !important; color: #ffffff !important; box-shadow: 0 5px 14px rgba(255, 106, 0, 0.2) !important; } /* Recusar */ #shopify-pc__banner__btn-decline { grid-column: 2 !important; grid-row: 1 !important; border: 1px solid #d8d8d8 !important; background-color: #ffffff !important; color: #171717 !important; box-shadow: none !important; } /* Gerenciar preferências */ #shopify-pc__banner__btn-manage-prefs { grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 34px !important; padding: 5px 8px !important; border: 0 !important; background: transparent !important; color: #555555 !important; box-shadow: none !important; font-size: 13px !important; font-weight: 650 !important; text-decoration-line: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; } /* Hover somente em aparelhos com mouse */ @media (hover: hover) { #shopify-pc__banner__btn-accept:hover { border-color: #e85f00 !important; background-color: #e85f00 !important; transform: translateY(-1px) !important; box-shadow: 0 7px 17px rgba(232, 95, 0, 0.24) !important; } #shopify-pc__banner__btn-decline:hover { border-color: #bdbdbd !important; background-color: #f7f7f7 !important; transform: translateY(-1px) !important; } #shopify-pc__banner__btn-manage-prefs:hover { color: #d95600 !important; } } /* Acessibilidade pelo teclado */ #shopify-pc__banner button:focus-visible, #shopify-pc__banner a:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.35) !important; outline-offset: 3px !important; } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { #shopify-pc__banner.shopify-pc__banner__dialog { right: 12px !important; bottom: 12px !important; left: 12px !important; width: auto !important; max-width: none !important; max-height: calc(100dvh - 24px) !important; transform: none !important; border-radius: 16px !important; box-shadow: 0 14px 40px rgba(17, 17, 17, 0.2), 0 3px 9px rgba(17, 17, 17, 0.08) !important; } #shopify-pc__banner .shopify-pc__banner__wrapper { display: block !important; padding: 18px !important; } #shopify-pc__banner__body-title { margin-bottom: 7px !important; font-size: 18px !important; } #shopify-pc__banner .shopify-pc__banner__body, #shopify-pc__banner .shopify-pc__banner__body p { font-size: 13px !important; line-height: 1.5 !important; } #shopify-pc__banner .shopify-pc__banner__btns { margin-top: 16px !important; gap: 9px !important; } #shopify-pc__banner .shopify-pc__banner__btns button { min-height: 43px !important; padding: 9px 10px !important; border-radius: 10px !important; font-size: 13px !important; } #shopify-pc__banner__btn-manage-prefs { min-height: 30px !important; padding: 4px !important; font-size: 12px !important; } } /* ========================================================= SHOPTOOL — PÁGINA FALE CONOSCO ========================================================= */ .shoptool-contact-page { --st-contact-orange: #ff6a00; --st-contact-orange-dark: #e85f00; --st-contact-green: #25b960; --st-contact-green-dark: #1fa854; --st-contact-black: #111111; --st-contact-text: #5f5f5f; --st-contact-border: #e7e7e7; --st-contact-soft: #f7f7f7; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; box-sizing: border-box; color: var(--st-contact-black); } /* ========================================================= TOPO ========================================================= */ .shoptool-contact-hero { position: relative; padding: clamp(36px, 6vw, 64px) 24px; overflow: hidden; border: 1px solid var(--st-contact-border); border-radius: 26px; background: radial-gradient( circle at 90% 10%, rgba(255, 106, 0, 0.13), transparent 32% ), linear-gradient( 145deg, #ffffff 0%, #fafafa 100% ); text-align: center; } .shoptool-contact-eyebrow { margin: 0 0 12px; color: var(--st-contact-orange); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .shoptool-contact-title { max-width: 700px; margin: 0 auto 16px; color: var(--st-contact-black); font-size: clamp(32px, 5vw, 52px); font-weight: 850; line-height: 1.05; letter-spacing: -0.04em; } .shoptool-contact-description { max-width: 650px; margin: 0 auto; color: var(--st-contact-text); font-size: 16px; line-height: 1.65; } /* ========================================================= CANAIS DE ATENDIMENTO ========================================================= */ .shoptool-contact-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; } .shoptool-contact-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px; border: 1px solid var(--st-contact-border); border-radius: 20px; background: #ffffff; box-shadow: 0 8px 24px rgba(17, 17, 17, 0.05); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .shoptool-contact-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; } .shoptool-contact-icon svg { display: block; width: 23px; height: 23px; } .shoptool-contact-icon--whatsapp { background: rgba(37, 185, 96, 0.12); color: var(--st-contact-green); } .shoptool-contact-icon--email { background: rgba(255, 106, 0, 0.12); color: var(--st-contact-orange); } .shoptool-contact-card__eyebrow { margin: 0 0 7px; color: var(--st-contact-orange); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .shoptool-contact-card__title { margin: 0 0 10px; color: var(--st-contact-black); font-size: 23px; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; } .shoptool-contact-card__text { flex: 1; margin: 0 0 24px; color: var(--st-contact-text); font-size: 14px; line-height: 1.6; } /* ========================================================= BOTÕES ========================================================= */ .shoptool-contact-button { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 18px; box-sizing: border-box; border-radius: 12px; font-size: 14px; font-weight: 800; line-height: 1; text-decoration: none !important; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .shoptool-contact-button span { font-size: 20px; line-height: 1; } .shoptool-contact-button--whatsapp { border: 1px solid var(--st-contact-green); background: var(--st-contact-green); color: #ffffff !important; box-shadow: 0 6px 16px rgba(37, 185, 96, 0.2); } .shoptool-contact-button--email { border: 1px solid var(--st-contact-orange); background: var(--st-contact-orange); color: #ffffff !important; box-shadow: 0 6px 16px rgba(255, 106, 0, 0.2); } /* ========================================================= INFORMAÇÕES ========================================================= */ .shoptool-contact-information { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .shoptool-contact-info-card { padding: 26px; border: 1px solid var(--st-contact-border); border-radius: 20px; background: var(--st-contact-soft); } .shoptool-contact-info-card__eyebrow { margin: 0 0 7px; color: var(--st-contact-orange); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .shoptool-contact-info-card__title { margin: 0 0 18px; color: var(--st-contact-black); font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; } .shoptool-contact-info-card__text, .shoptool-contact-info-card__note { color: var(--st-contact-text); font-size: 14px; line-height: 1.6; } .shoptool-contact-info-card__text { margin: 0 0 12px; } .shoptool-contact-info-card__note { margin: 16px 0 0; } /* Horários */ .shoptool-contact-hours { display: flex; flex-direction: column; gap: 0; } .shoptool-contact-hours__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(17, 17, 17, 0.08); color: var(--st-contact-text); font-size: 14px; line-height: 1.45; } .shoptool-contact-hours__row:first-child { padding-top: 0; } .shoptool-contact-hours__row:last-child { padding-bottom: 0; border-bottom: 0; } .shoptool-contact-hours__row strong { color: var(--st-contact-black); font-weight: 750; text-align: right; } /* Lista de orientações */ .shoptool-contact-checklist { display: block !important; margin: 0 !important; padding-left: 24px !important; list-style: decimal outside !important; } .shoptool-contact-checklist li { display: list-item !important; margin: 0 0 9px !important; padding-left: 4px !important; color: var(--st-contact-text); font-size: 14px; line-height: 1.55; } .shoptool-contact-checklist li:last-child { margin-bottom: 0 !important; } .shoptool-contact-checklist li::before { display: none !important; content: none !important; } .shoptool-contact-checklist li::marker { color: var(--st-contact-orange); font-weight: 800; } /* ========================================================= AVISO DE SEGURANÇA ========================================================= */ .shoptool-contact-security { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 22px 24px; border-radius: 18px; background: var(--st-contact-black); color: #ffffff; } .shoptool-contact-security__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 106, 0, 0.17); color: var(--st-contact-orange); } .shoptool-contact-security__icon svg { width: 23px; height: 23px; } .shoptool-contact-security__content { min-width: 0; } .shoptool-contact-security__title { margin: 0 0 5px; color: #ffffff; font-size: 17px; font-weight: 800; line-height: 1.3; } .shoptool-contact-security__text { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.55; } /* ========================================================= INTERAÇÕES COM MOUSE ========================================================= */ @media (hover: hover) { .shoptool-contact-card:hover { border-color: rgba(255, 106, 0, 0.28); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(17, 17, 17, 0.08); } .shoptool-contact-button--whatsapp:hover { border-color: var(--st-contact-green-dark); background: var(--st-contact-green-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 185, 96, 0.24); } .shoptool-contact-button--email:hover { border-color: var(--st-contact-orange-dark); background: var(--st-contact-orange-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 106, 0, 0.24); } } /* Navegação pelo teclado */ .shoptool-contact-button:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.38); outline-offset: 3px; } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { .shoptool-contact-page { padding: 12px 14px 56px; } .shoptool-contact-hero { padding: 34px 18px; border-radius: 20px; } .shoptool-contact-title { margin-bottom: 13px; font-size: 32px; } .shoptool-contact-description { font-size: 14px; line-height: 1.55; } .shoptool-contact-channels, .shoptool-contact-information { grid-template-columns: 1fr; gap: 14px; } .shoptool-contact-channels { margin-top: 14px; } .shoptool-contact-information { margin-top: 14px; } .shoptool-contact-card, .shoptool-contact-info-card { padding: 22px; border-radius: 17px; } .shoptool-contact-icon { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; } .shoptool-contact-card__title { font-size: 20px; } .shoptool-contact-card__text { margin-bottom: 20px; } .shoptool-contact-hours__row { gap: 14px; font-size: 13px; } .shoptool-contact-security { align-items: flex-start; margin-top: 14px; padding: 20px; border-radius: 16px; } } /* ========================================================= SHOPTOOL — PÁGINA SOBRE A SHOPTOOL ========================================================= */ .shoptool-about-page { --st-about-orange: #ff6a00; --st-about-orange-dark: #e85f00; --st-about-black: #111111; --st-about-text: #626262; --st-about-border: #e8e8e8; --st-about-soft: #f7f7f7; width: 100%; max-width: 1160px; margin: 0 auto; padding: 24px 20px 84px; box-sizing: border-box; color: var(--st-about-black); } /* ========================================================= HERO ========================================================= */ .shoptool-about-hero { position: relative; min-height: 450px; display: flex; align-items: flex-end; padding: clamp(42px, 7vw, 76px); box-sizing: border-box; overflow: hidden; border-radius: 28px; background: radial-gradient( circle at 85% 15%, rgba(255, 106, 0, 0.28), transparent 34% ), linear-gradient( 145deg, #080808 0%, #181818 100% ); color: #ffffff; } .shoptool-about-hero::before { content: ""; position: absolute; top: -120px; right: -80px; width: 340px; height: 340px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; } .shoptool-about-hero::after { content: ""; position: absolute; right: 110px; bottom: -150px; width: 280px; height: 280px; border: 1px solid rgba(255, 106, 0, 0.2); border-radius: 50%; } .shoptool-about-hero__content { position: relative; z-index: 2; max-width: 760px; } .shoptool-about-eyebrow { margin: 0 0 12px; color: var(--st-about-orange); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .shoptool-about-title { max-width: 720px; margin: 0 0 20px; color: #ffffff; font-size: clamp(42px, 6vw, 72px); font-weight: 850; line-height: 0.98; letter-spacing: -0.055em; } .shoptool-about-description { max-width: 630px; margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 17px; line-height: 1.65; } .shoptool-about-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .shoptool-about-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 20px; border-radius: 12px; font-size: 14px; font-weight: 800; text-decoration: none !important; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .shoptool-about-button span { font-size: 19px; line-height: 1; } .shoptool-about-button--primary { border: 1px solid var(--st-about-orange); background: var(--st-about-orange); color: #ffffff !important; box-shadow: 0 7px 18px rgba(255, 106, 0, 0.22); } .shoptool-about-button--secondary { border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #ffffff !important; } .shoptool-about-hero__signature { position: absolute; right: 34px; bottom: 18px; color: rgba(255, 255, 255, 0.035); font-size: clamp(70px, 12vw, 150px); font-weight: 900; line-height: 0.8; letter-spacing: -0.06em; user-select: none; } /* ========================================================= HISTÓRIA ========================================================= */ .shoptool-about-story { display: grid; grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr); gap: clamp(30px, 6vw, 80px); margin-top: 24px; padding: clamp(36px, 6vw, 68px); border: 1px solid var(--st-about-border); border-radius: 24px; background: #ffffff; } .shoptool-about-story__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .shoptool-about-number { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 106, 0, 0.1); color: var(--st-about-orange); font-size: 15px; font-weight: 850; } .shoptool-about-section-label { margin: 0; color: var(--st-about-black); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .shoptool-about-story__title { max-width: 700px; margin: 0 0 22px; color: var(--st-about-black); font-size: clamp(28px, 4vw, 44px); font-weight: 830; line-height: 1.08; letter-spacing: -0.04em; } .shoptool-about-story__content p { max-width: 760px; margin: 0 0 16px; color: var(--st-about-text); font-size: 15px; line-height: 1.75; } .shoptool-about-story__content p:last-child { margin-bottom: 0; } /* ========================================================= CABEÇALHOS DAS SEÇÕES ========================================================= */ .shoptool-about-section-header { max-width: 740px; margin: 0 auto 36px; text-align: center; } .shoptool-about-section-title { margin: 0 0 14px; color: var(--st-about-black); font-size: clamp(30px, 4vw, 46px); font-weight: 840; line-height: 1.08; letter-spacing: -0.04em; } .shoptool-about-section-description { margin: 0 auto; color: var(--st-about-text); font-size: 15px; line-height: 1.65; } /* ========================================================= PRINCÍPIOS ========================================================= */ .shoptool-about-principles { padding: clamp(64px, 9vw, 100px) 0; } .shoptool-about-principles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .shoptool-about-principle-card { position: relative; min-width: 0; min-height: 260px; padding: 28px; border: 1px solid var(--st-about-border); border-radius: 20px; background: #ffffff; box-shadow: 0 8px 24px rgba(17, 17, 17, 0.045); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .shoptool-about-principle-card__number { display: inline-flex; margin-bottom: 48px; color: var(--st-about-orange); font-size: 12px; font-weight: 850; letter-spacing: 0.1em; } .shoptool-about-principle-card__title { margin: 0 0 12px; color: var(--st-about-black); font-size: 21px; font-weight: 820; line-height: 1.2; letter-spacing: -0.025em; } .shoptool-about-principle-card__text { margin: 0; color: var(--st-about-text); font-size: 14px; line-height: 1.65; } /* ========================================================= MÉTODO ========================================================= */ .shoptool-about-method { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 7vw, 90px); padding: clamp(40px, 7vw, 72px); border-radius: 26px; background: var(--st-about-soft); } .shoptool-about-method__title { margin: 0 0 14px; color: var(--st-about-black); font-size: clamp(30px, 4vw, 44px); font-weight: 840; line-height: 1.08; letter-spacing: -0.04em; } .shoptool-about-method__description { margin: 0; color: var(--st-about-text); font-size: 14px; line-height: 1.65; } .shoptool-about-method__steps { display: flex; flex-direction: column; gap: 0; } .shoptool-about-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(17, 17, 17, 0.09); } .shoptool-about-step:first-child { padding-top: 0; } .shoptool-about-step:last-child { padding-bottom: 0; border-bottom: 0; } .shoptool-about-step__number { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--st-about-black); color: #ffffff; font-size: 13px; font-weight: 800; } .shoptool-about-step__title { margin: 0 0 6px; color: var(--st-about-black); font-size: 18px; font-weight: 800; } .shoptool-about-step__text { margin: 0; color: var(--st-about-text); font-size: 14px; line-height: 1.6; } /* ========================================================= TRANSPARÊNCIA ========================================================= */ .shoptool-about-transparency { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; margin-top: 24px; padding: clamp(34px, 6vw, 58px); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: 24px; background: linear-gradient( 135deg, rgba(255, 106, 0, 0.07), rgba(255, 255, 255, 1) 55% ); } .shoptool-about-transparency__marker { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 17px; background: var(--st-about-orange); color: #ffffff; font-size: 24px; font-weight: 850; box-shadow: 0 8px 20px rgba(255, 106, 0, 0.2); } .shoptool-about-transparency__eyebrow { margin: 0 0 9px; color: var(--st-about-orange); font-size: 11px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .shoptool-about-transparency__title { max-width: 780px; margin: 0 0 17px; color: var(--st-about-black); font-size: clamp(25px, 3.5vw, 38px); font-weight: 830; line-height: 1.12; letter-spacing: -0.035em; } .shoptool-about-transparency__text { max-width: 820px; margin: 0 0 12px; color: var(--st-about-text); font-size: 14px; line-height: 1.7; } .shoptool-about-transparency__text:last-child { margin-bottom: 0; } /* ========================================================= COMPROMISSO ========================================================= */ .shoptool-about-commitment { max-width: 880px; margin: 0 auto; padding: clamp(72px, 10vw, 120px) 20px; text-align: center; } .shoptool-about-quote { margin: 0 0 24px; padding: 0; border: 0; color: var(--st-about-black); font-size: clamp(32px, 5vw, 54px); font-weight: 850; line-height: 1.06; letter-spacing: -0.045em; } .shoptool-about-commitment__text { max-width: 700px; margin: 0 auto; color: var(--st-about-text); font-size: 15px; line-height: 1.75; } /* ========================================================= CONTATO ========================================================= */ .shoptool-about-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: clamp(34px, 6vw, 56px); border-radius: 24px; background: var(--st-about-black); color: #ffffff; } .shoptool-about-contact__title { margin: 0 0 10px; color: #ffffff; font-size: clamp(27px, 4vw, 40px); font-weight: 830; line-height: 1.1; letter-spacing: -0.035em; } .shoptool-about-contact__text { max-width: 650px; margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 14px; line-height: 1.65; } .shoptool-about-contact__actions { display: flex; flex-direction: column; gap: 10px; width: 220px; } .shoptool-about-contact-button { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 17px; border-radius: 11px; font-size: 13px; font-weight: 800; text-decoration: none !important; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .shoptool-about-contact-button--whatsapp { border: 1px solid #25b960; background: #25b960; color: #ffffff !important; } .shoptool-about-contact-button--email { border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); color: #ffffff !important; } /* ========================================================= INTERAÇÕES ========================================================= */ @media (hover: hover) { .shoptool-about-button--primary:hover { border-color: var(--st-about-orange-dark); background: var(--st-about-orange-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 106, 0, 0.27); } .shoptool-about-button--secondary:hover, .shoptool-about-contact-button--email:hover { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); } .shoptool-about-principle-card:hover { border-color: rgba(255, 106, 0, 0.28); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(17, 17, 17, 0.075); } .shoptool-about-contact-button--whatsapp:hover { border-color: #1fa854; background: #1fa854; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 185, 96, 0.22); } } .shoptool-about-page a:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.42); outline-offset: 3px; } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { .shoptool-about-page { padding: 12px 14px 56px; } .shoptool-about-hero { min-height: 490px; align-items: flex-end; padding: 38px 22px; border-radius: 21px; } .shoptool-about-title { font-size: 42px; } .shoptool-about-description { font-size: 14px; line-height: 1.55; } .shoptool-about-actions { flex-direction: column; align-items: stretch; margin-top: 24px; } .shoptool-about-button { width: 100%; box-sizing: border-box; } .shoptool-about-hero__signature { right: 16px; bottom: 12px; font-size: 68px; } .shoptool-about-story { grid-template-columns: 1fr; gap: 24px; margin-top: 14px; padding: 28px 22px; border-radius: 19px; } .shoptool-about-story__aside { flex-direction: row; align-items: center; } .shoptool-about-story__title { font-size: 29px; } .shoptool-about-story__content p { font-size: 14px; line-height: 1.65; } .shoptool-about-principles { padding: 64px 0; } .shoptool-about-section-header { margin-bottom: 26px; } .shoptool-about-section-title { font-size: 31px; } .shoptool-about-principles__grid { grid-template-columns: 1fr; gap: 13px; } .shoptool-about-principle-card { min-height: auto; padding: 24px; border-radius: 17px; } .shoptool-about-principle-card__number { margin-bottom: 30px; } .shoptool-about-method { grid-template-columns: 1fr; gap: 30px; padding: 30px 22px; border-radius: 20px; } .shoptool-about-method__title { font-size: 31px; } .shoptool-about-transparency { grid-template-columns: 1fr; gap: 21px; margin-top: 14px; padding: 28px 22px; border-radius: 19px; } .shoptool-about-transparency__title { font-size: 27px; } .shoptool-about-commitment { padding: 70px 8px; } .shoptool-about-quote { font-size: 34px; } .shoptool-about-contact { grid-template-columns: 1fr; gap: 25px; padding: 30px 22px; border-radius: 19px; } .shoptool-about-contact__actions { width: 100%; } } /* ========================================================= SHOPTOOL — PÁGINA COMPROMISSO COM NOSSOS CLIENTES ========================================================= */ .shoptool-commitment-page { --st-commit-orange: #ff6a00; --st-commit-orange-dark: #e85f00; --st-commit-green: #25b960; --st-commit-black: #111111; --st-commit-text: #626262; --st-commit-border: #e7e7e7; --st-commit-soft: #f7f7f7; width: 100%; max-width: 1160px; margin: 0 auto; padding: 24px 20px 84px; box-sizing: border-box; color: var(--st-commit-black); } /* ========================================================= ELEMENTOS GERAIS ========================================================= */ .shoptool-commitment-eyebrow { margin: 0 0 12px; color: var(--st-commit-orange); font-size: 12px; font-weight-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } /* ========================================================= HERO ========================================================= */ .shoptool-commitment-hero { position: relative; padding: clamp(44px, 7vw, 76px); overflow: hidden; border: 1px solid var(--st-commit-border); border-radius: 28px; background: radial-gradient( circle at 88% 12%, rgba(255, 106, 0, 0.16), transparent 34% ), linear-gradient( 145deg, #ffffff 0%, #f8f8f8 100% ); } .shoptool-commitment-hero::before { content: ""; position: absolute; top: -130px; right: -90px; width: 330px; height: 330px; border: 1px solid rgba(255, 106, 0, 0.15); border-radius: 50%; } .shoptool-commitment-hero__content { position: relative; z-index: 1; max-width: 820px; } .shoptool-commitment-title { max-width: 820px; margin: 0 0 20px; color: var(--st-commit-black); font-size: clamp(40px, 6vw, 68px); font-weight: 850; line-height: 1; letter-spacing: -0.055em; } .shoptool-commitment-description { max-width: 650px; margin: 0; color: var(--st-commit-text); font-size: 17px; line-height: 1.65; } .shoptool-commitment-badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .shoptool-commitment-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--st-commit-border); border-radius: 999px; background: #ffffff; color: #444444; box-shadow: 0 4px 12px rgba(17, 17, 17, 0.04); font-size: 12px; font-weight: 750; } .shoptool-commitment-badge > span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(37, 185, 96, 0.12); color: var(--st-commit-green); font-size: 11px; font-weight: 900; } /* ========================================================= CABEÇALHOS ========================================================= */ .shoptool-commitment-section-header { max-width: 760px; margin: 0 auto 38px; text-align: center; } .shoptool-commitment-section-title { margin: 0 0 14px; color: var(--st-commit-black); font-size: clamp(31px, 4.5vw, 48px); font-weight: 840; line-height: 1.08; letter-spacing: -0.042em; } .shoptool-commitment-section-text { max-width: 660px; margin: 0 auto; color: var(--st-commit-text); font-size: 15px; line-height: 1.65; } /* ========================================================= COMPROMISSOS ========================================================= */ .shoptool-commitment-promises { padding: clamp(66px, 9vw, 104px) 0; } .shoptool-commitment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .shoptool-commitment-card { min-width: 0; min-height: 240px; padding: 27px; border: 1px solid var(--st-commit-border); border-radius: 20px; background: #ffffff; box-shadow: 0 7px 22px rgba(17, 17, 17, 0.045); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .shoptool-commitment-card__number { display: inline-flex; margin-bottom: 42px; color: var(--st-commit-orange); font-size: 12px; font-weight: 850; letter-spacing: 0.1em; } .shoptool-commitment-card__title { margin: 0 0 11px; color: var(--st-commit-black); font-size: 20px; font-weight: 820; line-height: 1.22; letter-spacing: -0.025em; } .shoptool-commitment-card__text { margin: 0; color: var(--st-commit-text); font-size: 14px; line-height: 1.65; } /* ========================================================= JORNADA ========================================================= */ .shoptool-commitment-journey { padding: clamp(40px, 7vw, 70px); border-radius: 26px; background: radial-gradient( circle at 90% 5%, rgba(255, 106, 0, 0.18), transparent 28% ), var(--st-commit-black); color: #ffffff; } .shoptool-commitment-journey__intro { max-width: 760px; margin-bottom: 42px; } .shoptool-commitment-journey__title { margin: 0 0 15px; color: #ffffff; font-size: clamp(31px, 4.5vw, 48px); font-weight: 840; line-height: 1.08; letter-spacing: -0.042em; } .shoptool-commitment-journey__description { max-width: 650px; margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 15px; line-height: 1.65; } .shoptool-commitment-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .shoptool-commitment-step { min-width: 0; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 17px; background: rgba(255, 255, 255, 0.055); } .shoptool-commitment-step__top { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; } .shoptool-commitment-step__number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--st-commit-orange); color: #ffffff; font-size: 12px; font-weight: 850; } .shoptool-commitment-step__stage { color: rgba(255, 255, 255, 0.58); font-size: 11px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; } .shoptool-commitment-step__title { margin: 0 0 10px; color: #ffffff; font-size: 19px; font-weight: 800; line-height: 1.25; } .shoptool-commitment-step__text { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 13px; line-height: 1.65; } /* ========================================================= RESPONSABILIDADE ========================================================= */ .shoptool-commitment-responsibility { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 25px; margin-top: 24px; padding: clamp(36px, 6vw, 60px); border: 1px solid rgba(255, 106, 0, 0.2); border-radius: 24px; background: linear-gradient( 135deg, rgba(255, 106, 0, 0.07), #ffffff 58% ); } .shoptool-commitment-responsibility__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 17px; background: var(--st-commit-orange); color: #ffffff; box-shadow: 0 8px 20px rgba(255, 106, 0, 0.2); } .shoptool-commitment-responsibility__icon svg { width: 26px; height: 26px; } .shoptool-commitment-responsibility__eyebrow { margin: 0 0 10px; color: var(--st-commit-orange); font-size: 11px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .shoptool-commitment-responsibility__title { max-width: 850px; margin: 0 0 18px; color: var(--st-commit-black); font-size: clamp(25px, 3.8vw, 39px); font-weight: 835; line-height: 1.12; letter-spacing: -0.037em; } .shoptool-commitment-responsibility__text { max-width: 850px; margin: 0 0 12px; color: var(--st-commit-text); font-size: 14px; line-height: 1.7; } .shoptool-commitment-responsibility__text:last-child { margin-bottom: 0; } /* ========================================================= POLÍTICAS ========================================================= */ .shoptool-commitment-policies { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 7vw, 90px); padding: clamp(70px, 10vw, 110px) 0; } .shoptool-commitment-policies__title { margin: 0 0 13px; color: var(--st-commit-black); font-size: clamp(30px, 4vw, 44px); font-weight: 840; line-height: 1.08; letter-spacing: -0.04em; } .shoptool-commitment-policies__text { margin: 0; color: var(--st-commit-text); font-size: 14px; line-height: 1.65; } .shoptool-commitment-policy-links { display: flex; flex-direction: column; gap: 0; } .shoptool-commitment-policy-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding: 10px 4px; border-bottom: 1px solid var(--st-commit-border); color: var(--st-commit-black) !important; font-size: 15px; font-weight: 750; text-decoration: none !important; transition: color 180ms ease, padding 180ms ease; } .shoptool-commitment-policy-link:first-child { border-top: 1px solid var(--st-commit-border); } .shoptool-commitment-policy-link span:last-child { color: var(--st-commit-orange); font-size: 21px; line-height: 1; } /* ========================================================= CONTATO ========================================================= */ .shoptool-commitment-contact { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 34px; padding: clamp(36px, 6vw, 58px); border-radius: 24px; background: var(--st-commit-soft); } .shoptool-commitment-contact__title { margin: 0 0 10px; color: var(--st-commit-black); font-size: clamp(28px, 4vw, 41px); font-weight: 840; line-height: 1.1; letter-spacing: -0.037em; } .shoptool-commitment-contact__text { max-width: 650px; margin: 0; color: var(--st-commit-text); font-size: 14px; line-height: 1.65; } .shoptool-commitment-contact__actions { display: flex; flex-direction: column; gap: 10px; } .shoptool-commitment-contact-button { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 17px; border-radius: 11px; font-size: 13px; font-weight: 800; text-decoration: none !important; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .shoptool-commitment-contact-button--whatsapp { border: 1px solid var(--st-commit-green); background: var(--st-commit-green); color: #ffffff !important; box-shadow: 0 6px 16px rgba(37, 185, 96, 0.18); } .shoptool-commitment-contact-button--email { border: 1px solid var(--st-commit-black); background: var(--st-commit-black); color: #ffffff !important; } /* ========================================================= INTERAÇÕES ========================================================= */ @media (hover: hover) { .shoptool-commitment-card:hover { border-color: rgba(255, 106, 0, 0.28); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(17, 17, 17, 0.075); } .shoptool-commitment-policy-link:hover { padding-right: 9px; padding-left: 9px; color: var(--st-commit-orange) !important; } .shoptool-commitment-contact-button--whatsapp:hover { border-color: #1fa854; background: #1fa854; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 185, 96, 0.23); } .shoptool-commitment-contact-button--email:hover { border-color: #2a2a2a; background: #2a2a2a; transform: translateY(-2px); } } .shoptool-commitment-page a:focus-visible { outline: 3px solid rgba(255, 106, 0, 0.4); outline-offset: 3px; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 900px) { .shoptool-commitment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shoptool-commitment-steps { grid-template-columns: 1fr; } .shoptool-commitment-step__top { margin-bottom: 20px; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { .shoptool-commitment-page { padding: 12px 14px 56px; } .shoptool-commitment-hero { padding: 36px 21px; border-radius: 21px; } .shoptool-commitment-title { font-size: 39px; } .shoptool-commitment-description { font-size: 14px; line-height: 1.55; } .shoptool-commitment-badges { flex-direction: column; align-items: flex-start; margin-top: 26px; } .shoptool-commitment-badge { font-size: 11px; } .shoptool-commitment-promises { padding: 64px 0; } .shoptool-commitment-section-header { margin-bottom: 27px; } .shoptool-commitment-section-title { font-size: 31px; } .shoptool-commitment-grid { grid-template-columns: 1fr; gap: 13px; } .shoptool-commitment-card { min-height: auto; padding: 23px; border-radius: 17px; } .shoptool-commitment-card__number { margin-bottom: 29px; } .shoptool-commitment-journey { padding: 31px 21px; border-radius: 20px; } .shoptool-commitment-journey__intro { margin-bottom: 30px; } .shoptool-commitment-journey__title { font-size: 31px; } .shoptool-commitment-step { padding: 21px; border-radius: 15px; } .shoptool-commitment-responsibility { grid-template-columns: 1fr; gap: 21px; margin-top: 14px; padding: 28px 22px; border-radius: 19px; } .shoptool-commitment-responsibility__title { font-size: 27px; } .shoptool-commitment-policies { grid-template-columns: 1fr; gap: 28px; padding: 70px 0; } .shoptool-commitment-policies__title { font-size: 31px; } .shoptool-commitment-policy-link { min-height: 55px; font-size: 14px; } .shoptool-commitment-contact { grid-template-columns: 1fr; gap: 25px; padding: 30px 22px; border-radius: 19px; } }