/* Matte velvet texture on the brand-green surfaces (option E, Cray Oct 27, NS-2181).
   Layers only: the section keeps its own background-color, which paints first and is the fallback.
   g-fine = near-pixel grain, e-pile = short velvet pile, both brand-tinted overlays generated by
   outputs/qjr-matte-green-20261027/scripts/make_tiles.py. html body prefix outranks the plugin/page
   rules that set the flat color with the background shorthand. */
:root{
  --qjr-tex-grain:url(../img/texture/g-fine.webp);
  --qjr-tex-pile:url(../img/texture/e-pile.webp);
  --qjr-tex-dial:url(../img/texture/d-guilloche.svg);
  --qjr-tex-spot:radial-gradient(70% 75% at 50% -8%,rgba(110,170,160,.17),rgba(110,170,160,0) 70%);
  --qjr-tex-vign:radial-gradient(150% 120% at 50% 30%,rgba(0,0,0,0) 40%,rgba(0,0,0,.42) 100%);
  --qjr-tex-veil:linear-gradient(rgba(0,8,8,.1),rgba(0,8,8,.1));
}
/* Full-width sections: heroes, dark and CTA bands, footer. */
html body :is(.qjr-v2-hero,.qjr-info-hero,.qjr-rr-hero,.qjr-pv2-hero,.qjr-hero-dark,.qjr-info-section--dark,.qjr-rr-cta,.qjr-pv2-close,.qjr-pdp-proof,.qjr-footer-native,
  :is(.wp-block-group,.wp-block-cover,.wp-block-columns).has-bg-brand-dark-background-color,:is(.wp-block-group,.wp-block-cover,.wp-block-columns).has-bg-brand-background-color),
html body .qjr-info-cta:not(.qjr-info-page .qjr-info-cta){
  background-image:var(--qjr-tex-grain),var(--qjr-tex-pile),var(--qjr-tex-spot),var(--qjr-tex-vign),var(--qjr-tex-veil);
  background-size:64px 64px,256px 256px,100% 100%,100% 100%,100% 100%;
  background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat;
  background-position:0 0;
}
/* Cards on green (calculator result, form summary, pricing wholesale box, blog newsletter, mega menu): softer edges. */
html body :is(.qjr-pv2-calc__out,.qjr-pv2-sum,.qjr-wholesale-lead,.qjr-newsletter-widget,.qjr-mega-confidence){
  background-image:var(--qjr-tex-grain),var(--qjr-tex-pile),var(--qjr-tex-spot),radial-gradient(140% 120% at 50% 20%,rgba(0,0,0,0) 45%,rgba(0,0,0,.26) 100%);
  background-size:64px 64px,256px 256px,100% 100%,100% 100%;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-position:0 0;
}
/* Watch-dial (guilloché) lines on the watch and trade heroes only: Watch Repair, Brands, Partner With Us. */
html body:is(.term-watch-repair,.page-id-223022,.page-id-80144) :is(.qjr-rr-hero,.qjr-info-hero,.qjr-pv2-hero){
  background-image:var(--qjr-tex-dial),var(--qjr-tex-grain),var(--qjr-tex-pile),var(--qjr-tex-spot),var(--qjr-tex-vign),linear-gradient(rgba(0,8,8,.14),rgba(0,8,8,.14));
  background-size:288px 288px,64px 64px,256px 256px,100% 100%,100% 100%,100% 100%;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
}
/* Onyx brushed steel + watch-dial lines on the watch heroes only: Watch Repair category and Brands (Cray Oct 27, NS-2194).
   Steel = watch case; green stays the brand everywhere else (Partner keeps green + dial). Tiles a-grain/a-brushed from
   outputs/qjr-login-bg-20261027/scripts/make_tiles.py. White text 17.8:1, gold 7.6:1 on #15181B. */
:root{--qjr-tex-onyx-grain:url(../img/texture/onyx-grain.webp);--qjr-tex-onyx-brushed:url(../img/texture/onyx-brushed.webp)}
html body:is(.term-watch-repair,.page-id-223022) :is(.qjr-rr-hero,.qjr-info-hero){
  background-color:#15181B;
  background-image:var(--qjr-tex-dial),var(--qjr-tex-onyx-grain),var(--qjr-tex-onyx-brushed),
    radial-gradient(70% 80% at 28% -10%,rgba(190,205,215,.14),rgba(190,205,215,0) 70%),
    radial-gradient(150% 120% at 50% 30%,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%);
  background-size:288px 288px,64px 64px,256px 128px,100% 100%,100% 100%;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat;
}
/* The teal "See all services" button disappears into steel, so it takes the gold CTA style on this hero. */
html body.term-watch-repair .qjr-rr-hero .qjr-rr-btn.qjr-rr-btn--services{background:var(--rr-gold,#CEA41B);color:#14201F!important}
html body.term-watch-repair .qjr-rr-hero .qjr-rr-btn.qjr-rr-btn--services:hover{background:#E0B72B}
/* Category pages end with a green CTA block sitting right on the green footer; that block goes onyx so two greens don't
   stack (Cray Oct 27, NS-2195). Same steel as the watch heroes, no dial lines; the decorative circle becomes a faint steel disc. */
html body.tax-product_cat .qjr-rr-cta{
  background-color:#15181B;
  background-image:var(--qjr-tex-onyx-grain),var(--qjr-tex-onyx-brushed),
    radial-gradient(70% 80% at 50% -10%,rgba(190,205,215,.12),rgba(190,205,215,0) 70%),
    radial-gradient(150% 120% at 50% 30%,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%);
  background-size:64px 64px,256px 128px,100% 100%,100% 100%;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
}
html body.tax-product_cat .qjr-rr-cta::before{background:#AEB9C1;opacity:.05}
@media (forced-colors:active),print{
  html body :is(.qjr-v2-hero,.qjr-info-hero,.qjr-rr-hero,.qjr-pv2-hero,.qjr-hero-dark,.qjr-info-section--dark,.qjr-info-cta,.qjr-rr-cta,.qjr-pv2-close,.qjr-pdp-proof,.qjr-footer-native,.qjr-pv2-calc__out,.qjr-pv2-sum,.qjr-wholesale-lead,.qjr-newsletter-widget,.qjr-mega-confidence,.has-bg-brand-dark-background-color,.has-bg-brand-background-color){background-image:none}
  html body:is(.term-watch-repair,.page-id-223022) :is(.qjr-rr-hero,.qjr-info-hero),html body.tax-product_cat .qjr-rr-cta{background-image:none}
}