/*
Theme Name: GRIFFE
Theme URI: https://griffems.com.br
Author: Growth Digital Mídia
Description: Tema da loja GRIFFE — Outlet Multimarcas. Reproduz o design editorial (preto + dourado) sobre WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: griffe
*/

/* ===== Globais (do design) ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#F6F5F2;color:#0E0E0E;-webkit-font-smoothing:antialiased;font-family:'Hanken Grotesk',system-ui,sans-serif;}
a{text-decoration:none;color:inherit;border:0 solid transparent;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid #C8902A;outline-offset:3px;}
@keyframes grMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes grSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2.5deg)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;}}

/* ===== Placeholder de imagem (enquanto não há fotos reais) ===== */
.gr-imgph{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;text-align:center;
  background:linear-gradient(150deg,#efece6,#e2ddd2);color:#b3a98f;font-family:'Archivo',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.04em;padding:14px;}
.gr-imgph.dark{background:linear-gradient(150deg,#1a2438,#0b1424);color:#5d6a86;}

/* ===== Hover helpers (substituem style-hover do protótipo) ===== */
.gr-iconbtn{transition:background .2s;border-radius:2px;}
.gr-iconbtn:hover{background:#ECEAE4;}
.gr-navlink{border-bottom:2px solid transparent;transition:color .2s,border-color .2s;}
.gr-navlink:hover{border-color:#0E0E0E;}
.gr-navlink.sale:hover{border-color:#E2342B;}
.gr-brandcell{border:1px solid transparent;transition:background .16s,border-color .16s;}
.gr-brandcell:hover{background:#F6F5F2;border-color:#E4E1DB;}
.gr-grouptitle{transition:color .16s;}
.gr-grouptitle:hover{color:#C8902A;}
.gr-sublink{transition:color .16s,padding-left .16s;}
.gr-sublink:hover{color:#0E0E0E;padding-left:4px;}
.gr-size{transition:background .18s,color .18s;}
.gr-size:hover{background:#0E0E0E;color:#fff;}
.gr-btn-light{transition:transform .12s,background .2s;}
.gr-btn-light:hover{background:#C8902A;}
.gr-btn-ghost{transition:background .2s,border-color .2s;}
.gr-btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:#fff;}
.gr-footlink{transition:color .2s;}
.gr-footlink:hover{color:#fff;}
.gr-card{transition:border-color .25s,box-shadow .25s;}
.gr-card:hover{border-color:#D8D2C6;box-shadow:0 14px 30px rgba(14,14,14,.08);}
.gr-suggest{transition:background .18s,border-color .18s;}
.gr-suggest:hover{background:#0E0E0E;color:#fff;border-color:#0E0E0E;}

/* ===== Reveal on scroll ===== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
[data-reveal].in{opacity:1;transform:none;}

/* ===== Mega-menus / paineis (controlados por .open via JS) ===== */
.gr-panel{opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility .22s;}
.gr-has-mega:hover .gr-panel.gr-mega,.gr-panel.gr-mega.open{opacity:1;visibility:visible;transform:none;}
.gr-panel.open{opacity:1;visibility:visible;transform:none;}

/* drawers */
.gr-drawer{transition:transform .34s cubic-bezier(.16,1,.3,1);}
.gr-backdrop{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.gr-backdrop.open{opacity:1;visibility:visible;}

@media (max-width:900px){
  .gr-desktop-nav{display:none!important;}
  .gr-burger{display:grid!important;}
}