/* ==========================================================================
   SEYE — footer block + contact / CTA bands  (shared by all 4 pages)
   Design reference: Lanhu artboard 1920px · 1rem = 16px @ 1920
   ========================================================================== */

/* ==============================================================
   Contact section  —  full version with the brief form
   (Home + Contact us pages)
   ============================================================== */
.s-contact{background:var(--green);padding:7.71875rem 0 5.1875rem;position:relative;overflow:hidden}
/* on the Contact page and every category page the band starts right under the
   fixed bar → the design's own top offset (202 / 120) */
.page-contact .s-contact{padding-top:12.625rem;padding-bottom:5.1875rem}
.page-cat .s-contact{padding-top:7.5rem;padding-bottom:5.125rem}
/* the face / body artboards close the band 60 / 54px under the submit button
   instead of 82 — same earlier-revision drift as their efficacy block */
.page-face-care .s-contact{padding-bottom:3.75rem}
.page-body-care .s-contact{padding-bottom:3.375rem}
/* The six category artboards lay the closing band out on a slightly wider grid
   than the home / contact artboard does: the form column starts at x≈1000 and
   its first input sits 128px under the band edge (home: 947 / 174). Both
   figures are read off the artboards. */
.page-cat .grid-contact{grid-template-columns:57.5rem 54rem}   /* 920 + 864 */
.page-cat .ct-form{margin-top:-2.4375rem}                      /* -39 */
.page-cat .ct-left{padding-left:.9375rem}                      /* 15 */
.page-cat .ct-left .body-text{width:45.625rem;margin-top:1.96875rem}  /* 730 / 31.5 */
.page-cat .ct-links{margin-top:3.5625rem;width:39.5625rem}            /* 57 / 633 */
.s-contact::before{
  content:"";position:absolute;right:-12.5rem;bottom:-15rem;width:47.5rem;height:47.5rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 68%);pointer-events:none;
}
/* left copy column 852 · form column 866  (design: 80→932→1798) */
.grid-contact{display:grid;grid-template-columns:53.25rem 54.125rem;column-gap:0;position:relative}
.ct-left .h2{margin-top:3.28rem}
.ct-left .body-text{margin-top:1.40625rem;font-size:1.3125rem;line-height:2.40625rem;width:41.25rem}

.ct-links{margin-top:2.54rem;width:40.125rem}
.ct-link{
  display:flex;align-items:center;gap:1.125rem;height:4.25rem;
  border-top:1px solid #fff;color:#fff;
  transition:padding-left .45s cubic-bezier(.2,.8,.25,1),background-color .4s ease;
}
.ct-link-k{font-size:1.375rem;color:rgba(255,255,255,.85);position:relative;flex:0 0 auto}
.ct-link-k::after{content:"↗";font-size:1.0625rem;margin-left:.375rem;opacity:.7;display:inline-block;transition:transform .4s ease}
.ct-link:hover{padding-left:.625rem;background-color:rgba(255,255,255,.05)}
.ct-link:hover .ct-link-k::after{transform:translate(3px,-3px)}
.ct-link-line{flex:1;height:1px;background:transparent}
.ct-link-v{font-size:1.375rem;font-weight:500;color:#fff;text-align:right}
/* the address wraps over three lines → the row grows instead of clipping it */
.ct-link--stack{height:auto;min-height:4.25rem;padding:.9375rem 0;align-items:flex-start}
.ct-link--stack .ct-link-k{margin-top:.1875rem}
.ct-link:hover.ct-link--stack{padding-left:.625rem}
.ct-link--stack .ct-link-v{line-height:1.5}

/* form: two 402px fields, 62px gutter → 866px; 65px controls, 155px row pitch */
.ct-form{display:grid;grid-template-columns:25.125rem 25.125rem;column-gap:3.875rem;row-gap:0;position:relative}
.field{display:flex;flex-direction:column;margin-bottom:2.8125rem}
.field.full{grid-column:1/-1}
.field:last-of-type{margin-bottom:0}
.field label{font-size:1.3125rem;line-height:1;color:#fff;margin-bottom:1.5rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--green-deep);border-radius:.625rem;color:#fff;font-size:1.1875rem;
  border:1px solid rgba(255,255,255,.09);
  transition:border-color .35s ease,background-color .35s ease,box-shadow .35s ease;
}
.field input,.field select{height:4.0625rem;padding:0 1.5rem}
.field textarea{height:13.75rem;padding:1.25rem 1.5rem;resize:none;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.8'><path d='M4 6.5l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 1.375rem center;
}
.field select option{background:var(--green-deep);color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(255,255,255,.5);background:#1a3529;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
/* artboard: textarea bottom 10704 → button top 10765 (61px), button 486 × 85,
   band edge 82px under the button */
.ct-form .btn{--h:5.3125rem;width:30.375rem;margin-top:3.8125rem;font-size:1.3125rem}
.form-note{position:absolute;left:0;bottom:-2.125rem;font-size:1rem;color:#9fd7b8;opacity:0;transform:translateY(-4px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.form-note.show{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Country — searchable combobox
   The resting look is identical to the neighbouring <select>; focusing it
   reveals a filterable list of every country and region.
   -------------------------------------------------------------------------- */
.combo{position:relative}
.field .combo-input{padding-right:4.75rem;cursor:text}
.field .combo-input[readonly]{cursor:pointer}
.combo-chev{
  position:absolute;right:1.375rem;top:0;height:4.0625rem;
  display:flex;align-items:center;pointer-events:none;
}
.combo-chev svg{width:1rem;height:1rem;fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.combo.is-open .combo-chev svg{transform:rotate(180deg)}
.combo-chev svg{transition:transform .3s ease}
.combo-clear{
  position:absolute;right:3.25rem;top:0;height:4.0625rem;
  display:flex;align-items:center;cursor:pointer;opacity:.7;
  transition:opacity .3s ease;
}
.combo-clear:hover{opacity:1}
.combo-clear svg{width:1.125rem;height:1.125rem;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.combo-list{
  position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:60;
  max-height:20rem;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#fff;border-radius:.75rem;padding:.4375rem;
  box-shadow:0 28px 64px -22px rgba(0,0,0,.55);
}
.combo-list[hidden]{display:none}
.combo-opt{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;
  font-size:1.0625rem;line-height:1.35;color:#244a36;
}
.combo-opt .co-zh{font-size:.875rem;color:#7d8f83}
.combo-opt:hover,.combo-opt.is-active{background:#eef3ee}
.combo-opt.is-selected{background:var(--green);color:#fff}
.combo-opt.is-selected .co-zh{color:rgba(255,255,255,.7)}
.combo-opt mark{background:transparent;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.combo-empty{padding:.75rem 1rem;font-size:1rem;color:#6d7d70}
.combo-list::-webkit-scrollbar{width:.5rem}
.combo-list::-webkit-scrollbar-thumb{background:rgba(36,74,54,.3);border-radius:1rem}

/* ==============================================================
   Compact CTA band  —  Products / R&D pages
   ============================================================== */
.s-cta{background:var(--green);padding:7.5rem 0 9.4375rem;position:relative;overflow:hidden}
.s-cta::before{
  content:"";position:absolute;right:-12.5rem;bottom:-15rem;width:47.5rem;height:47.5rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 68%);pointer-events:none;
}
/* design: content 156 → 1754, split 1280 / 318 */
.cta-grid{width:99.875rem;margin-left:9.75rem;display:grid;grid-template-columns:80rem minmax(0,1fr);column-gap:0;align-items:end;position:relative}
.cta-left{min-width:0}
.cta-left .h2{margin-top:2.594rem;font-size:5.72rem;line-height:1.04;letter-spacing:0}
.cta-left .body-text{margin-top:2.306rem;font-size:1.3125rem;line-height:2.375rem;width:79rem}
.cta-left .ct-links{margin-top:4.67rem;width:40.125rem}
.cta-btn{display:flex;justify-content:flex-end}
.cta-btn .btn{--h:5.375rem;width:31rem;font-size:1.3125rem}

/* ==============================================================
   Footer
   ============================================================== */
/* artboard: band 10932 → 11332, content 11001 → 11247 (69px above the grid) */
.site-footer{background:var(--cream-2);padding:4.3125rem 0 5.3125rem}
/* The six category artboards are full-page exports, so their footer band can be
   read off exactly: 400 tall on lip / hand&foot / sun / eye, 388 on face and
   444 on body (those two were re-exported with a different amount of canvas
   left under the footer). */
@media (min-width:1024px){
  .page-cat .site-footer{padding-bottom:4.875rem}                      /* 400 */
  .page-face-care .site-footer{padding-top:4.8125rem;padding-bottom:3.625rem}
  .page-body-care .site-footer{padding-top:5.5rem;padding-bottom:6.4375rem}
}
.footer-grid{display:grid;grid-template-columns:24.6% 19.55% 20.2% 19.9% 15.75%}
.f-brand{padding-right:2.5rem;padding-left:1.125rem}
.f-logo{width:14rem;height:auto;margin-left:0;display:block}
.f-brand p{font-size:1.1875rem;line-height:1.62;color:#3f5445;margin-top:1.4625rem}
.f-socials{display:flex;align-items:center;gap:3rem;margin-top:1.5125rem}
.f-socials a{display:block;line-height:0;opacity:.92;transition:transform .4s cubic-bezier(.2,.8,.25,1),opacity .3s ease}
.f-socials a:nth-child(1) img{width:2.8125rem}
.f-socials a:nth-child(2) img{width:2.0625rem}
.f-socials a:nth-child(3) img{width:2.3125rem}
.f-socials img{height:auto}
.f-socials a:hover{transform:translateY(-4px) scale(1.07);opacity:1}

.f-col h4{font-size:1.4375rem;font-weight:700;letter-spacing:0;text-transform:uppercase;color:#244a36;margin-bottom:0;line-height:1;height:1.4375rem;position:relative;top:-.375rem}
.f-col ul{margin-top:2rem;display:flex;flex-direction:column;gap:1.1875rem}
.footer-grid .f-col:nth-child(4) ul{gap:.75rem}
.f-col a{font-size:1.1875rem;color:#3f5445;position:relative;display:inline-block;transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.25,1)}
.f-col a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--green);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.25,1)}
.f-col a:hover{color:var(--green);transform:translateX(4px)}
.f-col a:hover::after{transform:scaleX(1);transform-origin:left}

.f-contact{margin-right:-2.25rem}
.f-contact li{display:flex;gap:.6875rem;font-size:1.1875rem;line-height:1.6;color:#3f5445}
.f-contact .ico{width:1.625rem;height:1.625rem;flex:0 0 1.625rem;margin-top:.125rem;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.f-contact ul{gap:.6875rem}
.f-contact li+li{margin-top:.3125rem}

/* ==========================================================================
   Responsive  (below 1024 → fluid)
   ========================================================================== */
@media (max-width:1023.98px){
  html{font-size:16px}

  .s-contact,.page-contact .s-contact{padding:3.5rem 0 3rem}
  /* the six category pages carry extra artboard-driven offsets at 1920 that
     must not survive into the fluid layout */
  .page-cat .s-contact,.page-face-care .s-contact,.page-body-care .s-contact{padding:3.5rem 0 3rem}
  .page-cat .grid-contact,.page-cat .grid-contact{display:block;width:auto;margin:0;padding:0 1.25rem}
  .page-cat .ct-left{padding-left:0}
  .page-cat .ct-form{margin-top:2.75rem}
  .grid-contact{display:block;width:auto;margin:0;padding:0 1.25rem}
  .ct-left .h2{margin-top:1.25rem;font-size:clamp(1.75rem,7.4vw,2.5rem)}
  .ct-left .body-text{margin-top:1.25rem;width:auto;font-size:1rem;line-height:1.75}
  .page-cat .ct-left .body-text{margin-top:1.25rem;width:auto}
  .ct-links{margin-top:2rem;width:auto}
  .page-cat .ct-links{margin-top:2rem;width:auto}
  .ct-link{height:3.5rem}
  .ct-link--stack{min-height:3.5rem;padding:.5rem 0}
  .ct-link-k,.ct-link-v{font-size:1rem}
  /* the seven fields sit two-per-row, the country / category / brief span it */
  .ct-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:0;margin-top:2.75rem}
  .ct-form .field{margin-bottom:1.25rem!important;min-width:0}
  .ct-form .btn{--h:3.25rem;width:auto;min-width:11.5rem;max-width:100%;justify-self:start;margin-top:1.25rem;font-size:.9375rem}
  .field label{font-size:.875rem;margin-bottom:.5rem}
  .field input,.field select{height:2.875rem;font-size: 0.875rem;padding:0 .625rem}
  .field select{background-position:right .75rem center}
  .field .combo-input{padding-right:3.25rem}
  .combo-chev{right:.75rem;height:2.875rem}
  .combo-chev svg{width:.875rem;height:.875rem}
  .combo-clear{right:2.25rem;height:2.875rem}
  .combo-clear svg{width:.9375rem;height:.9375rem}
  .combo-list{max-height:15rem;padding:.3125rem}
  .combo-opt{padding:.625rem .75rem;font-size:.9375rem}
  .combo-opt .co-zh{font-size:.75rem}
  .field textarea{height:8rem;font-size:.9375rem;padding:.75rem .875rem}
  .form-note{position:static;margin-top:.625rem}

  .s-cta{padding:3.5rem 0 3rem}
  .cta-grid{display:block;width:auto;margin:0;padding:0 1.25rem}
  .cta-left .h2{margin-top:1.25rem;font-size:clamp(1.875rem,7.2vw,3.25rem);line-height:1.05}
  .cta-left .body-text{margin-top:1.25rem;width:auto;font-size:1rem;line-height:1.75}
  .cta-left .ct-links{margin-top:1.75rem;width:auto}
  .cta-btn{justify-content:flex-start;padding:2rem 0 0}
  .cta-btn .btn{--h:3.25rem;width:auto;min-width:11.5rem;max-width:100%;font-size:.9375rem}

  .site-footer{padding:2.75rem 0 2rem}
  .footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.875rem 1.25rem;width:auto;margin:0;padding:0 1.25rem}
  .f-brand{grid-column:1/-1;padding:0}
  .f-logo{width:9rem}
  .f-brand p{font-size:.9375rem}
  .f-socials{gap:1.5rem;margin-top:1.25rem}
  .f-socials a:nth-child(1) img{width:2rem}
  .f-socials a:nth-child(2) img{width:1.5rem}
  .f-socials a:nth-child(3) img{width:1.6875rem}
  .f-col{min-width:0}
  .f-col h4{font-size:1rem;height:1rem;top:0}
  .f-col ul{margin-top:1rem;gap:.6875rem;min-width:0}
  .f-col li{min-width:0}
  .f-col a,.f-contact li{font-size:.875rem}
  .f-col a{overflow-wrap:anywhere;word-break:break-word}
  /* the mailto: address is long → let it wrap instead of pushing the grid */
  .f-contact{margin-right:0;min-width:0;width:auto}
  .f-contact ul,.f-contact li{min-width:0;width:auto}
  .f-contact li{align-items:flex-start;overflow-wrap:anywhere;word-break:break-word}
  .f-contact .ico{width:1.125rem;height:1.125rem;flex:0 0 1.125rem}
}

/* phones — the postcode line needs the whole row so the address keeps its
   designed line breaks; the products list fills that row in two columns */
@media (max-width:639.98px){
  html{font-size:14px}
  .footer-grid .f-col:nth-child(4){grid-column:1/-1}
  .footer-grid .f-col:nth-child(4) ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:.6875rem}
  .footer-grid .f-col:nth-child(4) li{min-width:0}
  .f-contact{grid-column:1/-1}
  .f-contact ul,.f-contact li{width:auto;max-width:100%}
  .f-contact li{overflow-wrap:normal;word-break:normal}
  .f-contact [data-i18n-html]{white-space:nowrap}

  /* phones — the four short fields keep the iPad rhythm (two per row);
     country / category / brief still span both columns, the submit button
     and the hint line do the same */
  .ct-form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.875rem}
  .ct-form .field label{line-height:1.25}
  /* iOS 在输入框字号 < 16px 时会自动放大页面，一聚焦两列就被撑乱 → 手机上锁 16px */
  .ct-form .field input,.ct-form .field select,.ct-form .field textarea{font-size:16px}
  /* 半宽输入框里 "you@company.com" 这种占位串会顶到边，占位文字单独降一档 */
  .ct-form .field input::placeholder,.ct-form .field textarea::placeholder{font-size:15px}
  /* 360 这类窄屏仍差几个像素，超长串用省略号收尾，别切成半个字母 */
  .ct-form .field input{text-overflow:ellipsis}
  .ct-form .btn{grid-column:1/-1;width:100%;justify-self:stretch}
  .ct-form .form-note{grid-column:1/-1}
  /* the country dropdown must stay inside the band on a short screen */
  .combo-list{max-height:60vh}
}