/* Exact brandbook-page-3 marks, keyboard access and compact-height behavior. */
.kc-brand-mark { display:block; box-sizing:border-box; width:168px; padding:4px; background:#fdd201; border-radius:6px; line-height:0; }
.kc-brand-mark picture, .kc-brand-mark img { display:block; }
.kc-brand-mark img { width:100%; height:auto; object-fit:contain; }
.kc-head .kc-logo { width:168px; min-width:0; flex:0 0 168px; flex-direction:column; align-items:flex-start; gap:0; }
.kc-head .kc-logo__sub { margin-top:3px; }
.kc-brand-footer { display:inline-block; box-sizing:border-box; width:128px; padding:8px; background:#f8f7ef; border-radius:6px; line-height:0; vertical-align:middle; }
.kc-brand-footer img { display:block; width:100%; height:auto; aspect-ratio:227.8977 / 156.6023; object-fit:contain; }
.kc-footer__brand > .kc-brand-footer { display:block; margin-bottom:10px; }
#wrapwrap .kc-reference-brand { flex-direction:column; align-items:flex-start; gap:3px; }
#wrapwrap .kc-reference-brand small { margin-top:0; }
.kc-reference-footer-brand { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#wrapwrap .kc-skip-link { position:fixed; left:12px; top:12px; z-index:12000; transform:translateY(-180%); min-height:44px; padding:10px 18px; border:2px solid #3b491d; border-radius:6px; background:#fdd201; color:#283516; font:700 16px/1.5 var(--kc-font,Arial,sans-serif); text-decoration:underline; }
#wrapwrap .kc-skip-link:focus, #wrapwrap .kc-skip-link:focus-visible { transform:none; outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px #3b491d; }
#wrapwrap .kc-content-target { scroll-margin-top:var(--kc-skip-offset,12px); }
#wrapwrap .kc-content-target:focus { outline:2px solid #3b491d; outline-offset:-2px; }
@media (max-width:767.98px), (max-width:991.98px) and (max-height:500px) {
 .kc-brand-mark { width:88px; }
 .kc-head .kc-logo { width:88px; flex-basis:88px; }
}
@media (max-height:500px) {
 #wrapwrap .kc-head, #wrapwrap .kc-subnav, #wrapwrap .kc-reference-head { position:static !important; top:auto; }
 #wrapwrap .kc-content-target { scroll-margin-top:0; }
}
@media (prefers-reduced-motion:reduce) {
 #wrapwrap .kc-tile, #wrapwrap .kc-card { transition:none; }
 #wrapwrap .kc-tile:hover, #wrapwrap .kc-card:hover { transform:none; }
}
@media (forced-colors:active) {
 #wrapwrap .kc-skip-link:focus { outline-color:Highlight; box-shadow:none; }
}

/* Staff is a distinct existing route, visible beside the closed category menu. */
#wrapwrap .kc-staff-entry { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px; color:var(--kc-olive); font:700 14px/1.5 var(--kc-font); letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:underline; text-underline-offset:.2em; flex:0 1 155px; max-width:50%; }
#wrapwrap .kc-subnav > .kc-wrap { display:flex; align-items:center; gap:12px; }
#wrapwrap .kc-subnav > .kc-wrap > .kc-subnav__more { width:auto; min-width:0; flex:1 1 auto; }
.kc-head .kc-logo__sub { font-size:11px; line-height:1.4; letter-spacing:.12em; }
#wrapwrap .kc-auth-password-heading a { margin-left:0 !important; }
#wrapwrap .oe_login_form ::placeholder, #wrapwrap .oe_reset_password_form ::placeholder { color:#596142; opacity:1; }
#wrapwrap .oe_login_form .text-muted, #wrapwrap .oe_reset_password_form .text-muted { color:#596142 !important; }
#wrapwrap :is(.kc-main,.kc-catalog__main) .kc-section-title > div > h1 { font-family:var(--kc-display-font); font-size:clamp(2rem,4vw,3rem); letter-spacing:-1px; line-height:1.1; margin-top:9px; }
html:lang(en) #wrapwrap :is(.kc-main,.kc-catalog__main) .kc-section-title > div > h1 { font-family:"KC Hidebeast Blocky",var(--kc-display-font); font-weight:400; font-style:normal; letter-spacing:0; font-synthesis:none; line-height:1.2; overflow-wrap:break-word; }
html:lang(th) #wrapwrap :is(.kc-main,.kc-catalog__main) .kc-section-title > div > h1 { font-family:var(--kc-font); letter-spacing:normal; line-height:1.5; }
@media (max-width:767.98px), (max-width:991.98px) and (max-height:500px) { html:lang(en) #wrapwrap :is(.kc-main,.kc-catalog__main) .kc-section-title > div > h1 { font-size:clamp(28px,7.6vw,34px); } }

/* Explicit keyboard focus for the two confirmed header controls. */
#wrapwrap .kc-head .kc-logo:focus-visible { outline:3px solid #fdd201; outline-offset:4px; border-radius:4px; }
#wrapwrap .kc-head-search__submit:focus-visible { outline:3px solid #3b491d; outline-offset:-4px; background-color:#fdd201; }
@media (forced-colors:active) {
 #wrapwrap .kc-head .kc-logo:focus-visible, #wrapwrap .kc-head-search__submit:focus-visible { outline-color:Highlight; }
}