@layer base, kit, site;
/* cl-site.css: the shop pages' tokens, measured from the client's pages by `copy-site snapshot` (copy_site/tokens.py):
   cl-shop.css reads only these, so the listing, product and cart pages follow the client's type and colours.
   The client's own theme styles everything else (its header, footer and pages come from its markup), so no reset here.
   --mx is one phone-stage pixel and --u the unit the shop pages are written in: 1px on desktop, var(--mx) on phones. */
:root {
  --site-bg: #FFFFFF;
  --site-fg: #222222;
  --site-muted: #858585;
  --site-line: #D7D7D7;
  --site-band: #F2F2F2;
  --site-card: #F6F6F6;
  --site-accent: #FF7816;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #FF7816;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #222222;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #D7D7D7;
  --site-disabled-fg: #858585;
  --site-on-dark: #FFFFFF;        /* words on the black header, in both themes */
  --site-header-bg: #000000;
  --site-ink: #000000;            /* the footer's copyright line */
  --site-green: #006E3A;          /* TEIN green: the live search's and the picker's words */
  --site-green-wash: #D9E9E1;     /* a live search row under the pointer */
  --site-green-tint: rgba(0, 110, 58, 0.075);   /* a picker option under the pointer */
  --site-edge: #000000;           /* the picker's list and the live search's frame */
  --site-rule: #DDDDDD;
  --site-rule-soft: #E5E5E5;
  --site-text-2: #555555;
  --site-text-3: #777777;
  --site-option: #0D0D0D;
  --site-photo: #FFFFFF;          /* product photos sit on white whatever the theme */
  --site-font-body: "Noto Sans JP", "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
  --site-font-heading: Montserrat, "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
  --site-font-button: var(--site-font-body);
  --site-radius: 0;
  --site-max: 1320px;
  --mx: calc(100vw / 390);
  --u: 1px;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}
/* the dark theme (kit 0.10.0, `data-parts-theme="dark"` on <html>, by the visitor's clock or their pick): the white pages
   (the home, the shop pages, the search, the policies) turn a warm near black in the kit's family, text near white, the
   orange kept, TEIN green lifted to their own light green to read on the dark, photos on white plates. The header is
   black in both, and the client's pages and the cart, black already (body.theme-black), stay as they are. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-accent: #FF7816;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-button-bg: #FF7816;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #DDD7CF;
  --site-on-dark: #FFFFFF;
  --site-header-bg: #000000;
  --site-ink: #FFFFFF;
  --site-green: #3FBF6F;
  --site-green-wash: #15291D;
  --site-green-tint: rgba(63, 191, 111, 0.14);
  --site-edge: #3D3833;
  --site-rule: #3D3833;
  --site-rule-soft: #3D3833;
  --site-text-2: #EBE6E0;
  --site-text-3: #EBE6E0;
  --site-option: #F6F3EF;
  --site-photo: #FFFFFF;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #36312C;
}
/* ---------- the dark theme over the client's theme (style-c74bd5.css paints the white pages, their footer and the home's
   picker in literals): each rule repaints one of those, in the dark only and never on a body.theme-black page, which
   the theme already draws black; the footer takes the theme-black footer's look ---------- */
:root[data-parts-theme="dark"] .cl-body:not(.theme-black) { background: var(--site-bg); color: var(--site-fg); }
:root[data-parts-theme="dark"] body:not(.theme-black) .footer { background: var(--site-band); color: var(--site-fg); }
:root[data-parts-theme="dark"] body:not(.theme-black) .footer a,
:root[data-parts-theme="dark"] body:not(.theme-black) .footer .footer-search .btn { color: var(--site-fg); }
:root[data-parts-theme="dark"] body:not(.theme-black) .footer .footer-search { border-bottom-color: var(--site-fg); }
:root[data-parts-theme="dark"] body:not(.theme-black) .footer .footer-search input { background: none; color: var(--site-fg); }
:root[data-parts-theme="dark"] body:not(.theme-black) .footer .footer-search input::placeholder { color: var(--site-muted); }
:root[data-parts-theme="dark"] .cl-body:not(.theme-black) :is(.title-tertiary, .title-primary, .title-en, .link-img-size .title) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .search-form-sm { background: var(--site-green-tint); border-color: var(--site-green); }
:root[data-parts-theme="dark"] .search-form-sm .title { color: var(--site-green); }
:root[data-parts-theme="dark"] .search-form-sm .input-wrap label { color: var(--site-fg); }
:root[data-parts-theme="dark"] .search-form-sm .input-wrap :is(select, .btn-select) { background-color: var(--site-field-bg); color: var(--site-fg); border-color: var(--site-line); }
:root[data-parts-theme="dark"] .search-form-sm .input-wrap .btn-select > span { color: var(--site-fg); }
:root[data-parts-theme="dark"] .search-form-sm .input-wrap .btn-select:disabled { background-color: var(--site-disabled-bg); }
:root[data-parts-theme="dark"] .search-form-sm .input-wrap .btn-select:disabled > span { color: var(--site-disabled-fg); }
:root[data-parts-theme="dark"] .cl-body:not(.theme-black) :is(input, textarea) { color: var(--site-fg); }   /* the theme inks every field near black, the kit's quantity boxes too */
:root[data-parts-theme="dark"] .slick-dots li button:before { color: var(--site-fg); }   /* the home slider's dots, black in slick-theme.css */
/* the header's search drawer: the theme draws a white field in the black drawer on every page */
:root[data-parts-theme="dark"] .header-search .header-search-form { background: var(--site-field-bg); }
:root[data-parts-theme="dark"] .header-search .header-search-input,
:root[data-parts-theme="dark"] .header-search .header-search-submit { color: var(--site-fg); }
:root[data-parts-theme="dark"] .header-search .header-search-input::placeholder { color: var(--site-muted); }

/* the primary button (Add to Cart, Check out) */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 20px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 600 16px/1 var(--site-font-button); text-decoration: none; cursor: pointer;
  transition: filter 0.2s ease;
}
.cl-btn:hover { filter: brightness(1.1); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }
/* the 404 (templates/404.html) */
.cl-404__home { text-align: center; padding: 0 20px 80px; }

.cl-open, .cl-open > ul, .cl-open > div { display: block !important; visibility: visible !important; opacity: 1 !important;
  transform: none !important; left: 0 !important; right: auto !important; max-height: none !important; height: auto !important;
  pointer-events: auto !important; }
nav.cl-open, .cl-open { position: relative; z-index: 9999; }
html.cl-menu-open { overflow-x: hidden; }

/* the Orbital Parts mark in the bar, 150 wide */
@media screen and (min-width: 768px) {
  .header-wrap .header .logo a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .header-wrap .header .logo a img { width: 150px; }
}
@media screen and (max-width: 767px) {
  .header-wrap .header .logo a { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .header-wrap .header .logo a img { width: 150px; height: 30px; }
}

/* the footer's copyright, trademark line and support address at full contrast: the theme's .copy is #828282, and a copied page's
   theme stylesheet loads after this file, so html leads each selector */
html .footer .copy { color: var(--site-ink); }
html body.theme-black .footer .copy { color: var(--site-on-dark); }
html .footer .copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }