/*
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}


/* ========================================================
   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 colour is the one place the site leaves
   its own palette: a WhatsApp control is read as WhatsApp before it is read as
   this site's button, so it wears the brand green the visitor already knows,
   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: #128C7E;
  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; }
}