/* Inner pages — dark product-first theme matching the homepage (home.css):
   near-black ground, amber #f8b62b accent, hairline rules, 8px radii.
   Loaded after css.css on every page; overrides the CMS template's light
   sections. Sprite note: jia/jian/down0/download are amber (fine on dark);
   promore0 is black, so listing cards use the amber promore arrow always. */

html, body { background: #0a0a0b; }
body { color: #fff; }

/* css.css nukes outlines globally; restore keyboard focus on every page */
a:focus-visible, button:focus-visible { outline: 2px solid #f8b62b !important; outline-offset: 3px; border-radius: 2px; }

/* current top-level section in the header nav (build sets .on + aria-current) */
header .nav a.on { color: #f8b62b; }
#menu > ul > li > a.on { color: #f8b62b; }

/* lock the page while the mobile menu overlay is open */
body.maxDiv { overflow: hidden; }

/* mobile drawer: dark panel, out of the tab order while closed */
.maskbg { visibility: hidden; }
.maxDiv .maskbg { visibility: visible; }
.maskbg:before { background: #101013; }
.phone-head .mask-close { background: #1c1d20; color: #fff; border: 0; }
#menu { padding: 6px 0 12px; }
button.expand, button.mask-close { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; }
button.expand { background-color: transparent; padding: 0; }

/* footer seller credit */
.footmain .seller { margin-top: 20px; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.5; max-width: 300px; }
.footmain .seller a { display: inline-block; }
.footmain .seller img { height: 28px; width: auto; display: block; }
.footmain .seller span { display: block; margin-top: 9px; }
.footmain .seller a:hover img { opacity: .85; }

/* chrome shares the page ground (css.css paints both pure black) */
header.fixed, header.nyfixed { background: #0a0a0b; }
footer { background: #0a0a0b; }
footer .fnav > ul > li > a { font-size: 16px; }

/* listing cards: one chevron vocabulary instead of the amber sprite disc */
.pro-sec .main ul li .tbox .tit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='2'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  background-size: 16px 16px !important; background-position: right center;
}
.pro-sec .main ul li:hover .tbox .tit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f8b62b' stroke-width='2'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  background-size: 16px 16px !important; background-position: right center;
}

/* deep-link clearance under the phone header + sticky tab bar */
@media (max-width: 1024px) { .cat-sec[id] { scroll-margin-top: 110px; } }

/* --- breadcrumb / series tab bar --------------------------------------- */
.location-nav { background: #0d0d0f; border-bottom: 1px solid rgba(255,255,255,.12); }
.location-nav.fixed { box-shadow: 0 2px 20px rgba(0,0,0,.6); }
.location-nav .link { color: #fff; }
.location-nav .navlinks a { color: rgba(255,255,255,.6); }
.location-nav .navlinks a:hover,
.location-nav .navlinks a.on { color: #f8b62b; }

/* --- product listings (.pro-sec) ---------------------------------------- */
.pro-sec { background: #0a0a0b; }
.pro-sec .intitle .tit,
.pro-sec .intitlebox .tit { color: #fff; }
.pro-sec .intitle .desc,
.pro-sec .intitlebox .desc { color: rgba(255,255,255,.62); }
.pro-sec .main ul li .pic { border-radius: 8px; background-color: #131316; }
.pro-sec .main ul li .tbox .tit { color: #fff; background-image: url(../images/promore.png); }
.pro-sec .main ul li:hover .tbox .tit { color: #f8b62b; }
.pro-sec .main ul li .tbox .desc { color: rgba(255,255,255,.58); }

/* The template's editorial two-up (59%/38% widths, 560px images, staggered
   offsets) makes a 15-product catalogue ~10,000px tall. Hard-reset to a
   compact uniform grid; !important beats the template's nth-child offsets. */
.pro-sec .main ul { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
.pro-sec .main ul::before, .pro-sec .main ul::after { content: none; }  /* clearfix pseudos become grid items */
.pro-sec .main ul li { width: auto !important; margin: 0 !important; }
.pro-sec .main ul li .pic { height: auto !important; aspect-ratio: 4 / 3; }
.pro-sec .main ul li .tbox { padding: 14px 0 0 !important; }
.pro-sec .main ul li .tbox .tit { font-size: 18px; line-height: 1.3; background-size: 26px 26px; }
.pro-sec .main ul li:hover .tbox .tit { background-size: 26px 26px; }
.pro-sec .main ul li .tbox .desc { font-size: 14px; margin-top: 4px; }
@media (max-width: 1023px) {
  .pro-sec .main ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pro-sec .main ul { gap: 20px 16px; }
  .pro-sec .main ul li .tbox .tit { font-size: 15px; }
  .pro-sec .main ul li .tbox .desc { font-size: 12.5px; }
}

/* --- support / download pages ------------------------------------------- */
.support-sec { background: #0a0a0b; }
.support-sec .main { background: #111114; border: 1px solid rgba(255,255,255,.08); }
.support-sec .intitle .tit { color: #fff; }
.support-sec .intitle .desc { color: rgba(255,255,255,.62); }
.supportlist li { border-bottom: 1px solid rgba(255,255,255,.12); }
.supportlist li .tit { color: #fff; }
.supportlist li .desc { color: rgba(255,255,255,.7); }
.supportlist li a { color: inherit; }

/* --- showcase / applications / video centre ------------------------------ */
.case-sec { background: #0a0a0b; }
.case-sec .intitle .tit { color: #fff; }
.case-sec .intitle .desc { color: rgba(255,255,255,.62); }
.case-sec .list li { border-radius: 8px; background: #131316; }
.case-sec .list li .desc { color: rgba(255,255,255,.62); }

/* --- company ------------------------------------------------------------- */
.about-sec2 { background: #0a0a0b; }
.about-sec2 .intitle .tit { color: #fff; }
.about-sec2 .intitle .desc { color: rgba(255,255,255,.62); }
.honorbox { background: #131316; border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
.honorbox .tbox { color: rgba(255,255,255,.78); }
.honorbox .tbox:before { background: rgba(255,255,255,.12); }
.honorswiper .swiper-button-prev,
.honorswiper .swiper-button-next { background: rgba(255,255,255,.12); color: #fff; }
.honorswiper .swiper-button-prev:hover,
.honorswiper .swiper-button-next:hover { background: #f8b62b; color: #131313; }

/* --- showcase / application article pages -------------------------------- */
.eventsxq-sec { background: #0a0a0b; }
.eventsxq-sec, .eventsxq-sec span, .eventsxq-sec p, .eventsxq-sec .tit { color: #fff; }
.eventsxq-sec .desc, .eventsxq-sec .info { color: rgba(255,255,255,.62); }

/* --- /products/ sectioned catalogue --------------------------------------- */
/* products page opens with the breadcrumb bar, which must clear the fixed
   header. Sticky (not the CMS's JS-added .fixed) keeps the bar in flow, so
   same-document hash jumps measure scroll targets correctly. */
.cat-page .location-nav,
.cat-page .location-nav.fixed { position: -webkit-sticky; position: sticky; top: 80px; margin-top: 100px; }
@media (max-width: 1024px) {
  .cat-page .location-nav,
  .cat-page .location-nav.fixed { margin-top: 0; top: 50px; }  /* .h spacer offsets the phone header */
  /* the tab bar collapses into a dropdown panel; re-ground it for the dark theme */
  .location-nav .navlinks { background: #101013; border-color: rgba(255,255,255,.14); }
}
.cat-head { padding: 40px 0 6px; }
.cat-head .w1600, .cat-sec .main { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.cat-head h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: #fff; }
.cat-head p { color: rgba(255,255,255,.62); font-size: 16.5px; margin: 0; }
.cat-sec { padding: 46px 0 6px; }
.cat-sec[id] { scroll-margin-top: 150px; }

/* studio-cutout photography rendered as a deliberate spec plate */
.pro-sec .main ul li .pic.plate { background-color: #fff; background-size: contain; background-origin: content-box; padding: 10px; background-repeat: no-repeat; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cat-tit { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 700; color: #fff; margin: 0 0 8px; }
.cat-lede { color: rgba(255,255,255,.62); font-size: 15.5px; line-height: 1.6; max-width: 70ch; margin: 0 0 30px; }
.cat-more { color: #f8b62b; }
.cat-more:hover { text-decoration: underline; }
.cat-sec .main { margin-top: 0; padding-top: 0; }

/* --- generic headline blocks on any remaining section -------------------- */
.intitle .tit { color: #fff; }
.intitle .desc { color: rgba(255,255,255,.62); }

/* --- pagination arrows (build-generated) --------------------------------- */
.pagearrow { color: rgba(255,255,255,.7); }

/* --- mobile slide menu: white panel -> dark ------------------------------ */
#menu { background: #101013; }
#menu .nav { background: #101013; }
#menu a { color: #fff; }
#menu li { border-color: rgba(255,255,255,.1); }
#menu a:hover { color: #131313; background: #f8b62b; }