/*
Theme Name: LOVECOLOUR
Theme URI: https://custompatchkey.com/
Author: LOVECOLOUR Team
Description: Custom patches & brand accessories manufacturer theme per 网站规划.md.
Version: 1.1.0
*/

:root {
  --color-canvas: #f9fafb;
  --color-surface: #ffffff;
  --color-ink: #171717;   /* 设计参考.html L13 — near black, not blue-grey */
  --color-muted: #6b7280;
  --color-line: #e5e7eb;
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* 设计参考.html L28 / DESIGN.md master width — one container for the header,
     the footer and every page, so nothing sits on a second grid. Widened down
     from the reference's 1420px to the supplier measure the owner asked for:
     1200px, read by assets/css/tokens.css as well. */
  --wrap: 1200px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: min(var(--wrap), calc(100% - 56px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  padding: 8px 12px;
  background: #000;
  color: #fff;
  z-index: 999;
}
.skip-link:focus {
  top: 16px;
}

/* Header
   Spec: 设计参考.html L47–L52 (values written literally so the nav does not
   depend on which stylesheet's :root wins the cascade — the nav CTA below is
   the one exception: it reads the shared button tokens on purpose, so the
   header pill and every other inquiry button stay one control). */
.site-header {
  background: rgba(247, 246, 242, 0.95); /* L47 */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(223, 222, 216, 0.85); /* L47 */
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px; /* L48 */
  height: 76px; /* L48 */
}
.brand {
  font-size: 1.35rem;
  font-weight: 900; /* L49 */
  letter-spacing: 0.04em; /* L49 */
  color: var(--color-ink);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px; /* L50 */
  font-size: 13px; /* L50 */
}
.nav-links a {
  font-size: 13px; /* L50 */
  font-weight: 500;
  color: var(--color-ink);
  transition: color 0.15s ease;
}
.nav-links a:hover {
  color: #F36F21; /* L51 */
}
.nav-search-icon {
  display: flex;
  align-items: center;
  padding: 4px;
  color: var(--color-muted);
}
.nav-search-icon:hover {
  color: var(--color-ink);
}

/* Language switcher — the navigation's last item (inc/i18n.php). It keeps the
   nav's own scale (13px labels, the header's border colour) so it reads as part
   of the menu rather than as a control bolted onto it; the language being read
   is a filled pill, the other one a link on hover orange like every other nav
   item. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}
.nav-lang-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-muted);
  text-decoration: none;
}
.nav-lang a.nav-lang-item:hover,
.nav-lang a.nav-lang-item:focus-visible {
  color: #F36F21;
}
.nav-lang-item.is-current {
  background: #171717;
  color: #fff;
}

/* Primary nav CTA — the site's main inquiry control (spec: 设计参考.html L52).
   The spec's own numbers are gone: it now reads the shared button tokens
   (assets/css/tokens.css), so the header pill fills with the same deepened
   accent as every other inquiry button and darkens rather than changes hue on
   hover. The label stays the nav's own 12px, and the pill stays unwrapped. */
.nav-links .nav-cta {
  padding: 13px 20px;
  background: var(--color-cta, #C8500F);
  color: #fff;
  border-radius: var(--btn-radius, 8px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus-visible {
  background: var(--color-cta-hover, #A83F09);
  color: #fff;
}
.nav-links .nav-cta:focus-visible {
  outline: 2px solid var(--color-cta, #C8500F);
  outline-offset: 2px;
}

/* Nav Dropdown */
.nav-item.has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 70px;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 16px;
  min-width: 220px;
  z-index: 110;
}
.dropdown-menu.mega-menu {
  /* Two columns now that Ready Stock moved to the top level */
  min-width: 520px;
  padding: 24px;
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dropdown-col {
  display: flex;
  flex-direction: column;
}
.dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown-list li {
  margin-bottom: 2px;
}
.nav-item.has-dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu a {
  display: block;
  padding: 6px 10px;
  font-size: 0.875rem;
  border-radius: 4px;
  color: var(--color-ink);
  transition: all 0.15s ease;
}
.dropdown-menu a:hover {
  background: #f3f4f6;
  color: var(--color-primary);
}
.dropdown-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted);
  letter-spacing: 0.05em;
  padding: 4px 10px 8px;
  display: block;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 8px;
}
/* Planning Block */
.section {
  padding: 64px 0;
}
.planning-box {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 64px 32px;
  text-align: center;
  margin: 32px auto;
  max-width: 800px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
.planning-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #fff7ed;
  color: var(--color-primary);
  border: 1px solid #ffedd5;
  margin-bottom: 20px;
}
.planning-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--color-ink);
}
.planning-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.planning-meta {
  font-size: 0.875rem;
  color: var(--color-muted);
}
.planning-meta code {
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 4px;
  color: #111827;
  font-family: monospace;
}

/* Footer */
.site-footer {
  background: #171717;
  color: #9E9E99;
  padding: 72px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand {
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.footer-desc {
  font-size: 13px;
  line-height: 1.65;
  color: #9E9E99;
  max-width: 320px;
  margin-bottom: 22px;
}
/* The footer's own inquiry button: same fill as the header pill and the page
   CTAs (assets/css/tokens.css), so the footer is not a second, paler ask. The
   fill is the accent now, so hover only deepens it — it never becomes orange
   with a white label the way it used to. */
.btn-primary {
  display: inline-block;
  background: var(--color-cta, #C8500F);
  color: #FFFFFF;
  border-radius: var(--btn-radius, 8px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
}
.btn-primary:hover {
  background: var(--color-cta-hover, #A83F09);
  color: #FFFFFF;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--color-cta, #C8500F);
  outline-offset: 2px;
}
.footer-col h4 {
  color: #A7A7A2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col a {
  color: #B8B8B2;
  font-size: 13px;
  line-height: 1.5;
  transition: color 0.15s ease;
}
.footer-col a:hover {
  color: #FFFFFF;
}
.foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8E8E88;
}

/* Legal row (网站规划.md §22–§23): the three legal routes live in the footer
   only, under the base line, and stay quieter than the footer's link columns. */
.footer-legal {
  padding-top: 18px;
}
.footer-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal-list li + li {
  position: relative;
}
.footer-legal-list li + li::before {
  content: "/";
  position: absolute;
  inset-inline-start: -15px;
  color: #4A4A46;
}
.footer-legal-list a {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8E8E88;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-legal-list a:hover {
  color: #FFFFFF;
}

/* The primary nav (Home / Products / Stock / About / Knowledge / FAQ / Contact
   / Start a Project / search) needs the whole width of the bar. Measured: from
   about 1000px down it no longer fits on one line, and between 769px and that
   point the leftover width turned into a sideways scroll of the entire page
   (document.scrollWidth 891px at a 780px viewport, on every page of the site).
   So the nav stacks from 1000px rather than from 768px. The footer keeps its
   own 768px breakpoint: four columns still read well above that width. */
@media (max-width: 1000px) {
  .site-nav {
    flex-direction: column;
    height: auto;
    padding: 16px 0;
    gap: 14px;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
  }
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* Homepage editorial system */
:root{--color-canvas:#F7F6F2;--color-surface:#fff;--color-ink:#171717;--color-muted:#6E6E69;--color-line:#DFDED8;--color-primary:#F36F21;--color-blue:#BCCBD5;--color-olive:#C7C9B5;--color-sand:#D9C8B0}
.home-page{background:var(--color-canvas);overflow:hidden}.home-page img{display:block;width:100%;height:100%;object-fit:cover}.home-page em{font-style:normal;color:var(--color-primary)}
.home-hero{padding:82px 0 48px}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:64px;align-items:end}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin:0 0 14px}.hero-copy h1,.home-page h2{font-family:var(--font-body);letter-spacing:-.06em}.hero-copy h1{font-size:clamp(58px,8.4vw,120px);line-height:.88;margin:0}.hero-side{padding-bottom:8px;color:var(--color-muted)}.hero-side p{font-size:16px;line-height:1.62;margin:0 0 24px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.home-btn{display:inline-flex;align-items:center;gap:15px;padding:13px 17px;border-radius:3px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:transform .2s ease,background .2s ease,color .2s ease}.home-btn:hover{transform:translateY(-3px);text-decoration:none}.home-btn span{font-size:16px;line-height:0}.home-btn--dark{background:var(--color-ink);color:#fff}.home-btn--line{border:1px solid var(--color-line)}.home-btn--orange{background:var(--color-primary);color:#fff}.hero-image-wrap{height:min(43vw,620px);margin-top:52px;overflow:hidden;position:relative;background:var(--color-primary)}.hero-image{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}.hero-image-wrap:hover .hero-image{transform:scale(1.035)}.hero-image-label{position:absolute;inset-inline-start:20px;bottom:20px;background:rgba(247,246,242,.94);padding:12px 15px}.hero-image-label span,.hero-image-label small{display:block}.hero-image-label span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}.hero-image-label small{font-size:13px;margin-top:4px}.hero-foot{display:flex;justify-content:space-between;gap:20px;padding-top:14px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.home-strip{border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-line)}.principle-grid>div{background:var(--color-canvas);padding:28px 24px;min-height:150px}.principle-grid strong{display:block;font-size:12px;color:var(--color-primary);margin-bottom:20px}.principle-grid span,.principle-grid small{display:block}.principle-grid span{font-size:21px;font-weight:700;letter-spacing:-.04em}.principle-grid small{font-size:12px;color:var(--color-muted);margin-top:8px}
.home-section{padding:112px 0}.home-section--white{background:#fff}.home-section--dark{background:var(--color-ink);color:#fff}.home-section--sand{background:var(--color-sand)}.section-intro{display:grid;grid-template-columns:1fr 410px;gap:50px;align-items:end;margin-bottom:42px}.home-page h2{font-size:clamp(42px,5vw,68px);line-height:.94;margin:0}.section-lead{color:var(--color-muted);max-width:410px;margin:0}.section-intro--dark .eyebrow{color:#A7A7A2}.section-intro--dark .section-lead{color:#B8B8B2}.project-grid{display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:12px}.project-card{position:relative;min-height:490px;overflow:hidden;background:#ddd}.project-card--tall{min-height:570px}.project-card img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.project-card:hover img{transform:scale(1.04)}.project-card>div{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(247,246,242,.94);padding:12px 14px}.project-card span{display:block;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--color-muted);margin-bottom:5px}.project-card h3{font-size:20px;line-height:1.12;margin:0;letter-spacing:-.04em}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#42423f;border-top:1px solid #42423f;border-bottom:1px solid #42423f}.product-tile{background:var(--color-ink);min-height:220px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s ease,transform .25s ease}.product-tile:hover{background:#2b2b29;transform:translateY(-6px)}.product-tile span{font-size:11px;color:#a7a7a2}.product-tile strong{font-size:25px;letter-spacing:-.05em}.product-tile small{font-size:12px;color:#b8b8b2}
.journey-wrap{display:grid;grid-template-columns:1fr 2fr;gap:70px}.journey-heading p:not(.eyebrow){color:#585851;max-width:310px}.journey-heading h2 span{color:var(--color-primary)}.journey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.journey-grid article{background:#fff}.journey-grid img{height:210px}.journey-grid article b,.journey-grid article p{display:block;padding:0 18px}.journey-grid article b{padding-top:18px;font-size:12px;letter-spacing:.05em}.journey-grid article p{font-size:13px;color:var(--color-muted);padding-bottom:18px}
.home-statement{background:var(--color-canvas);padding:145px 0}.home-statement p{font-size:clamp(48px,7.2vw,100px);line-height:.93;letter-spacing:-.07em;font-weight:700;margin:0 0 40px}.home-cta{text-align:center}.home-cta h2{margin-bottom:24px}.home-cta>div>p:not(.eyebrow){color:var(--color-muted);margin:0 auto 26px}
.home-reveal{animation:home-rise .8s both}.home-reveal:nth-child(2){animation-delay:.12s}@keyframes home-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.home-page *{animation:none!important;transition:none!important}}
@media (max-width:900px){.hero-grid,.section-intro,.journey-wrap{grid-template-columns:1fr;gap:28px}.hero-image-wrap{height:56vw}.project-grid{grid-template-columns:1fr 1fr}.project-card--tall{grid-row:auto;min-height:480px}.product-grid{grid-template-columns:1fr 1fr}.journey-grid{gap:10px}.hero-foot{flex-wrap:wrap}.home-section{padding:78px 0}}
@media (max-width:600px){.home-hero{padding-top:55px}.hero-copy h1{font-size:clamp(52px,16vw,82px)}.hero-image-wrap{height:72vw;margin-top:35px}.hero-foot{display:grid;grid-template-columns:1fr;font-size:9px;gap:7px}.principle-grid{grid-template-columns:1fr 1fr}.principle-grid>div{min-height:130px;padding:20px 15px}.principle-grid span{font-size:17px}.project-grid,.product-grid,.journey-grid{grid-template-columns:1fr}.project-card,.project-card--tall{min-height:420px}.journey-grid img{height:230px}.home-statement{padding:90px 0}.section-intro{margin-bottom:28px}.home-page h2{font-size:48px}}
/* Scroll reveal states for homepage cards */
.home-page .project-card,.home-page .product-tile,.home-page .journey-grid article{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.home-page .project-card.is-visible,.home-page .product-tile.is-visible,.home-page .journey-grid article.is-visible{opacity:1;transform:none}
.home-page .project-card:nth-child(2),.home-page .product-tile:nth-child(2),.home-page .journey-grid article:nth-child(2){transition-delay:.08s}.home-page .project-card:nth-child(3),.home-page .product-tile:nth-child(3),.home-page .journey-grid article:nth-child(3){transition-delay:.16s}


/* ========================================================
   BACK TO TOP — one floating control, revealed by the pinned WP Behaviors
   runtime (footer.php writes the markup, functions.php loads the library).
   The runtime owns when it is shown; every visual decision lives here.
   The fill is the off-white surface rather than ink because a fixed control
   sits over the black footer band as often as over the warm paper: the 1px
   ink edge is what keeps it legible on either, and the ink fill is kept for
   the hover state, the same inversion the site's buttons already use.
   Radius, hairline, uppercase-free icon and the single accent follow the rest
   of the site; inset-inline-end puts it bottom-right in English, Spanish and
   Russian and bottom-left in Arabic without a second rule.
   ======================================================== */
.lc-back-to-top {
  position: fixed;
  inset-inline-end: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 90; /* below the sticky header (100) and its dropdowns (110) */
}
.lc-back-to-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-control, 4px);
  background: var(--color-surface, #FFFFFF);
  color: var(--color-ink);
  cursor: pointer;
  animation: lc-back-to-top-in 0.2s ease-out;
  transition: background 0.2s ease, color 0.2s ease;
}
.lc-back-to-top-btn:hover {
  background: var(--color-ink);
  color: #FFFFFF;
}
.lc-back-to-top-btn:focus-visible {
  outline: 2px solid var(--color-orange, #F36F21);
  outline-offset: 2px;
}
.lc-back-to-top-btn svg { display: block; }
/* A fresh arrival rather than a fade, because the control is hidden with
   display:none between appearances and so cannot be transitioned. */
@keyframes lc-back-to-top-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* The control hands focus to #main so Tab continues from the top of the page.
   The region ring that follows would be drawn around the whole viewport, so it
   is suppressed in that one state — which only exists while the runtime holds
   the tabindex it added. */
#main[tabindex="-1"]:focus { outline: none; }
@media (max-width: 700px) {
  .lc-back-to-top {
    inset-inline-end: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .lc-back-to-top-btn { animation: none; }
}
@media print {
  .lc-back-to-top { display: none; }
}

/* ========================================================
   WHATSAPP — one floating contact control on the right edge, at the vertical
   middle of the viewport (footer.php prints it site-wide, from the number the
   site stores in its own options). Its fill is the one control here that is not
   one of the palette's own accents: a WhatsApp control is read as WhatsApp
   before it is read as this site's button, so the resting fill stays the
   literal brand green the visitor already knows, the hover deepens it to the
   shared WhatsApp token the site's other WhatsApp controls use
   (assets/css/tokens.css — it is no longer the old teal), and the site accent
   returns in the keyboard ring.
   The side is physical rather than logical on purpose: the request is the right
   edge, and a contact control that moves sides per language is a control people
   cannot learn. It sits in the same layer as the back-to-top control, and the
   two never share a corner — one is mid-right, the other is bottom-right.
   ======================================================== */
.lc-whatsapp {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 90; /* below the sticky header (100) and its dropdowns (110) */
}
.lc-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lc-whatsapp-btn:hover {
  background: var(--color-whatsapp-hover, #1DA851);
  transform: scale(1.06);
}
/* The ring is drawn on the page behind the control, so it is the site's accent
   rather than green: it stays visible over the warm paper and over the black
   bands alike. */
.lc-whatsapp-btn:focus-visible {
  outline: 2px solid var(--color-orange, #F36F21);
  outline-offset: 3px;
}
.lc-whatsapp-btn svg { display: block; }
@media (max-width: 700px) {
  .lc-whatsapp { right: 16px; }
  .lc-whatsapp-btn { width: 52px; height: 52px; }
}
/* A visitor who has reduced motion asked for no movement, including a button
   that grows under the pointer. */
@media (prefers-reduced-motion: reduce) {
  .lc-whatsapp-btn { transition: background 0.2s ease; }
  .lc-whatsapp-btn:hover { transform: none; }
}
@media print {
  .lc-whatsapp { display: none; }
}