/*
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. */
  --wrap: 1420px;
}

*, *::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). */
.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 — spec: 设计参考.html L52 */
.nav-links .nav-cta {
  padding: 12px 17px;
  background: #171717;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus-visible {
  background: #F36F21;
  color: #fff;
}

/* 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;
}
.btn-primary {
  display: inline-block;
  background: #FFFFFF;
  color: #171717;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 18px;
}
.btn-primary:hover {
  background: #F36F21;
  color: #FFFFFF;
}
.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}