/* Runtime styles for the statically-rendered Claude Design pages.
   Wrapper classes are emitted by scripts/convert.mjs.
   NOTE: this file is a SOURCE — convert.mjs concatenates it with the
   generated style-hover rules into site.css, which is what pages link
   (with a ?v=<content-hash> for cache busting). Edit here, then reconvert. */

/* responsive branches — display:contents keeps the wrapper out of flex/grid layout */
.gr-desk { display: contents; }
.gr-mob { display: none; }
@media (max-width: 980px) {
  .gr-desk { display: none; }
  .gr-mob { display: contents; }
}

/* header dropdown menus (desktop) */
.gr-dropdown { display: none; }
.gr-navitem:hover .gr-dropdown,
.gr-navitem:focus-within .gr-dropdown { display: block; }

/* mobile nav panel + FAQ answers + submitted form state: JS removes [hidden] */
.gr-mobile-nav[hidden], .gr-faq-a[hidden], .gr-form-done[hidden] { display: none; }
.gr-form-live[hidden] { display: none; }

[data-gr="nav-toggle"], [data-gr="faq-toggle"] { cursor: pointer; }

/* Brands We Service: brand grid 2/3 + shop photo 1/3, stacked on mobile */
.gr-brands-split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 980px) {
  .gr-brands-split { grid-template-columns: 1fr; }
  .gr-brands-split img { min-height: 240px; max-height: 320px; }
}

/* generated from style-hover attrs */
.gr-h1:hover{color:#E8B84B!important}
.gr-h2:hover{color:#C8102E!important}
.gr-h3:hover{background:#F7F6F3!important;color:#C8102E!important}
.gr-h4:hover{background:#A30D26!important}
.gr-h5:hover{border-color:#FFFFFF!important;background:rgba(255,255,255,0.06)!important}
.gr-h6:hover{background:rgba(255,255,255,0.08)!important}
.gr-h7:hover{background:#101216!important;color:#FFFFFF!important}
.gr-h8:hover{background:rgba(255,255,255,0.12)!important}
.gr-h9:hover{color:#FFFFFF!important}
.gr-h10:hover{background:#16181C!important;color:#FFFFFF!important}
.gr-h11:hover{border-left-color:#C8102E!important;box-shadow:0 10px 30px rgba(16,18,22,0.07)!important}
.gr-h12:hover{border-color:#C8102E!important;box-shadow:0 10px 30px rgba(16,18,22,0.08)!important}
.gr-h13:hover{background:#C8102E!important}
.gr-h14:hover{border-color:#C8102E!important;background:#FFFFFF!important}
.gr-h15:hover{border-color:#C8102E!important;color:#C8102E!important}