/* Layout primitives only. Keep reusable frame and shell rules here. */
.ni-page,
.ni-container,
.ni-section,
.ni-layout-frame {
  width: 100%;
  max-width: var(--ni-page-max, 960px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.ni-page {
  background: transparent;
}

.ni-section {
  padding-left: var(--ni-page-gutter, clamp(14px, 3vw, 28px));
  padding-right: var(--ni-page-gutter, clamp(14px, 3vw, 28px));
}

.ni-grid {
  display: grid;
  gap: var(--ni-gap-md, 16px);
}

.ni-mobile-shell {
  width: 100%;
  min-width: 0;
}

body[data-ni-modern-shell="1"] .block,
body[data-ni-modern-shell="1"] #mainNav,
body[data-ni-modern-shell="1"] #search {
  box-sizing: border-box;
}

/* NI_GLOBAL_960_CANONICAL_LAYOUT_START
 * Site-wide layout contract: all primary frontend frames converge to 960px max.
 * Page-specific designs may compose inside this frame, but must not create wider active wrappers.
 */
html body .ni-page,
html body .ni-container,
html body .ni-section,
html body .ni-layout-frame{
  width:100%;
  max-width:var(--ni-page-max, var(--ni-container, 960px));
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
/* NI_GLOBAL_960_CANONICAL_LAYOUT_END */

/* Canonical site footer: compact global source.
 * Root cause fixed: legacy global input/button rules were overriding the newsletter form, and earlier footer scale was still product-page sized.
 * Keep footer layout here only; do not reintroduce page-local footer CSS.
 */
html body .ni-site-footer,
html body .ni-site-footer *{
  box-sizing:border-box;
}
html body .ni-site-footer{
  width:min(var(--ni-page-max, 960px), calc(100% - 34px));
  margin:16px auto 10px;
  overflow:hidden;
  border:1px solid rgba(223,201,189,.68);
  border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,rgba(255,253,249,.96) 0%,rgba(251,245,240,.96) 100%);
  color:var(--ni-color-text, #5d514b);
  box-shadow:0 -4px 14px rgba(122,91,76,.026), inset 0 1px 0 rgba(255,255,255,.82);
}
html body .ni-site-footer__inner{
  display:grid;
  grid-template-columns:minmax(160px,.92fr) repeat(3,minmax(86px,.46fr)) minmax(180px,.78fr);
  gap:clamp(9px,1.55vw,18px);
  align-items:start;
  padding:20px clamp(18px,2.4vw,30px) 18px;
}
html body .ni-site-footer__logo{
  display:inline-block;
  color:#4e372f;
  font-family:"Noto Serif TC","Hiragino Mincho ProN","PMingLiU",serif;
  font-size:clamp(20px,1.55vw,25px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:.01em;
  text-decoration:none;
}
html body .ni-site-footer__brand p,
html body .ni-site-footer__newsletter p{
  margin:8px 0 0;
  color:#947d74;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:clamp(11px,.82vw,12.5px);
  font-weight:400;
  line-height:1.58;
  letter-spacing:.035em;
}
html body .ni-site-footer__social{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}
html body .ni-site-footer__social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 10px;
  border:1px solid rgba(217,194,183,.78);
  border-radius:999px;
  background:rgba(255,255,255,.50);
  color:#9a746a;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:12px;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
html body .ni-site-footer__social a:hover{
  transform:translateY(-1px);
  border-color:rgba(200,157,144,.84);
  color:#80584f;
  box-shadow:0 8px 16px rgba(128,90,80,.08), inset 0 1px 0 rgba(255,255,255,.92);
}
html body .ni-site-footer__col h4,
html body .ni-site-footer__newsletter h4{
  margin:0 0 8px;
  color:#5a4038;
  font-family:"Noto Serif TC","Hiragino Mincho ProN","PMingLiU",serif;
  font-size:clamp(12.5px,.92vw,14px);
  font-weight:800;
  line-height:1.36;
  letter-spacing:.09em;
}
/* NI_SITE_FOOTER_COL_CENTER_CANONICAL
 * 購物指南 / 關於我們 / 會員服務：全寬度欄內置中。唯一樣式來源 layout.css。 */
html body .ni-site-footer__col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  min-width:0;
}
html body .ni-site-footer__col h4{
  width:100%;
  text-align:center;
  white-space:nowrap;
}
html body .ni-site-footer__col a{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto 6px;
  color:#90786f;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:clamp(11px,.82vw,12.5px);
  font-weight:400;
  line-height:1.55;
  letter-spacing:.035em;
  text-align:center;
  text-decoration:none;
  overflow-wrap:anywhere;
}
html body .ni-site-footer__col a:hover{
  color:#b7656e;
}
html body .ni-site-footer__subscribe{
  display:flex;
  align-items:stretch;
  width:100%;
  max-width:280px;
  min-height:38px;
  margin-top:9px;
  overflow:hidden;
  border:1px solid rgba(218,190,177,.86);
  border-radius:18px;
  background:#fffdf9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
/* Footer newsletter form reset: keep one canonical outer frame only.
 * Legacy style.css has many global input/button !important rules; reset them at component scope.
 */
html body .ni-site-footer__subscribe input,
html body .ni-site-footer__subscribe input[type="email"],
html body .ni-site-footer__subscribe button,
html body .ni-site-footer__subscribe button[type="submit"]{
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background-image:none !important;
  box-sizing:border-box !important;
}
html body .ni-site-footer__subscribe input,
html body .ni-site-footer__subscribe input[type="email"]{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:36px;
  padding:0 13px;
  background:transparent !important;
  background-color:transparent !important;
  color:#6c5b55 !important;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:clamp(11px,.78vw,12px);
  letter-spacing:.02em;
}
html body .ni-site-footer__subscribe input::placeholder{
  color:#8d8986;
}
html body .ni-site-footer__subscribe button,
html body .ni-site-footer__subscribe button[type="submit"]{
  flex:0 0 clamp(66px,6.2vw,82px);
  min-width:0;
  height:auto;
  padding:0 10px;
  background:var(--ni-color-coral, #cf717b) !important;
  background-color:var(--ni-color-coral, #cf717b) !important;
  color:#fff !important;
  font-family:"Noto Serif TC","Hiragino Mincho ProN","PMingLiU",serif;
  font-size:clamp(12px,.82vw,13.5px);
  font-weight:800;
  line-height:1;
  letter-spacing:.10em;
  cursor:pointer;
  transition:background .18s ease, transform .14s ease;
}
html body .ni-site-footer__subscribe button:hover,
html body .ni-site-footer__subscribe button[type="submit"]:hover{
  background:var(--ni-color-coral-hover, #bf626d) !important;
  background-color:var(--ni-color-coral-hover, #bf626d) !important;
}
html body .ni-site-footer__copy{
  padding:10px 14px 12px;
  border-top:1px solid rgba(223,201,189,.58);
  color:#aa958c;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:clamp(10.5px,.76vw,12px);
  line-height:1.45;
  letter-spacing:.02em;
  text-align:center;
}
@media screen and (max-width:1024px) and (min-width:866px){
  html body .ni-site-footer{
    width:min(var(--ni-page-max, 960px), calc(100% - 26px));
    margin-top:15px;
    border-radius:20px 20px 0 0;
  }
  html body .ni-site-footer__inner{
    grid-template-columns:minmax(150px,.9fr) repeat(3,minmax(82px,.46fr)) minmax(170px,.76fr);
    gap:12px 16px;
    padding:19px 22px 17px;
  }
  html body .ni-site-footer__subscribe{
    max-width:270px;
  }
}
/* NI_SITE_FOOTER_NAV_ROW_TABLET_CENTER
 * 701-865px：三欄 nav 整排置中；brand / newsletter 維持全寬上下區。 */
@media screen and (max-width:865px){
  html body .ni-site-footer{
    width:calc(100% - 20px);
    margin-top:14px;
    border-radius:19px 19px 0 0;
  }
  html body .ni-site-footer__inner{
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-items:center;
    gap:14px 12px;
    padding:18px 18px 16px;
    text-align:center;
  }
  html body .ni-site-footer__brand,
  html body .ni-site-footer__newsletter{
    grid-column:1 / -1;
    justify-self:stretch;
    width:100%;
  }
  html body .ni-site-footer__brand{
    text-align:left;
  }
  html body .ni-site-footer__newsletter{
    text-align:left;
  }
  html body .ni-site-footer__newsletter .ni-site-footer__subscribe{
    margin-left:0;
    margin-right:auto;
  }
  html body .ni-site-footer__col{
    justify-self:center;
    width:100%;
    max-width:220px;
  }
  html body .ni-site-footer__logo{
    font-size:clamp(19px,3.6vw,24px);
  }
  html body .ni-site-footer__subscribe{
    max-width:300px;
    min-height:38px;
  }
  html body .ni-site-footer__subscribe input,
  html body .ni-site-footer__subscribe input[type="email"]{
    height:36px;
  }
}
@media screen and (max-width:700px){
  html body .ni-site-footer{
    width:calc(100% - 14px);
    margin:14px auto calc(var(--ni-mobile-cart-reserve, 76px) + env(safe-area-inset-bottom, 0px));
    border-radius:18px 18px 0 0;
  }
  html body .ni-site-footer__inner{
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-items:center;
    gap:12px 8px;
    padding:17px 13px 15px;
    text-align:center;
  }
  html body .ni-site-footer__brand,
  html body .ni-site-footer__newsletter{
    grid-column:1 / -1;
  }
  html body .ni-site-footer__col:nth-of-type(1),
  html body .ni-site-footer__col:nth-of-type(2),
  html body .ni-site-footer__col:nth-of-type(3){
    grid-column:auto;
  }
  html body .ni-site-footer__social{
    justify-content:center;
    gap:7px;
    margin-top:12px;
  }
  html body .ni-site-footer__social a{
    min-width:32px;
    height:32px;
    font-size:11px;
  }
  html body .ni-site-footer__col{
    justify-self:center;
    width:100%;
    max-width:none;
  }
  html body .ni-site-footer__col h4,
  html body .ni-site-footer__newsletter h4{
    margin-bottom:7px;
    font-size:12px;
    letter-spacing:.05em;
  }
  html body .ni-site-footer__col a{
    margin-bottom:5px;
    font-size:11px;
    line-height:1.38;
  }
  html body .ni-site-footer__brand p,
  html body .ni-site-footer__newsletter p{
    margin-top:7px;
    font-size:11px;
    line-height:1.5;
  }
  html body .ni-site-footer__subscribe{
    min-height:38px;
    margin:9px auto 0;
    border-radius:999px;
  }
  html body .ni-site-footer__subscribe input,
  html body .ni-site-footer__subscribe input[type="email"]{
    height:36px;
    padding:0 12px;
    font-size:11px;
  }
  html body .ni-site-footer__subscribe button,
  html body .ni-site-footer__subscribe button[type="submit"]{
    flex-basis:62px;
    font-size:11px;
    padding:0 8px;
  }
  html body .ni-site-footer__copy{
    padding:10px 10px 12px;
    font-size:10.5px;
  }
}

/* NI_SITE_FOOTER_BOTTOM_SPACING_CANONICAL
 * Homepage baseline: footer margin-bottom reserves the mobile cart island;
 * body padding-bottom is safe-area only. Page-level cart reserves are retired.
 */
@media screen and (min-width:701px){
  html body .ni-site-footer{
    margin-bottom:var(--ni-footer-bottom, 10px);
  }
}