/* Desktop follows the approved 1717 × 916 composition. At <= 1100px,
   content reflows rather than shrinking text or image-map hit targets. */
#story.snack-footer{position:relative;display:block;width:100%;margin:0;padding:0;border:0;aspect-ratio:1717/916;container-type:inline-size;background:#fff5e2 var(--story-background-image,url("footer-design-v2.webp")) center/100% 100% no-repeat;color:#422511;font-family:Arial, sans-serif;font-size:16px;isolation:isolate}
#story.snack-footer [hidden]{display:none!important}
#story .ft-benefits{position:absolute;left:2.7%;top:24.65%;width:50.65%;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
#story .ft-benefits h2{margin:0;font:700 1.63cqw/1.4 Arial, sans-serif;letter-spacing:0}
#story .ft-benefits p{margin:.48cqw 0 0;font-size:1.11cqw;line-height:1.6;white-space:nowrap}
#story .ft-service-icon{display:none}
#story .ft-links{position:absolute;top:41.95%;left:4.66%;display:grid;grid-template-columns:11.95cqw 12.8cqw 12cqw;gap:0}
#story .ft-links h2,#story .ft-social h2{margin:0 0 .73cqw;font:700 1.34cqw/1.5 Arial, sans-serif;letter-spacing:0}
#story .ft-links nav{display:flex;flex-direction:column;align-items:flex-start;gap:.73cqw;margin:0}
#story .ft-links button,#story .ft-links a{border:0;background:none;padding:0;color:inherit;font:400 1.05cqw/1.35 Arial, sans-serif;text-decoration:none;text-align:left;cursor:pointer}
#story .ft-links button:hover,#story .ft-links a:hover{text-decoration:underline;text-underline-offset:4px}
#story .ft-social{position:absolute;left:39.65%;top:41.7%;width:13.8%;min-height:25.5%;padding:.5cqw;background:#fff5e2}
#story .ft-social>p{margin:0 0 .8cqw;font-size:.97cqw;line-height:1.6}
#story .ft-social-list{display:flex;flex-wrap:wrap;gap:.95cqw}
#story .ft-social-toggle{width:2.7cqw;height:2.7cqw;min-width:32px;min-height:32px;padding:0;border:0;border-radius:50%;background-color:transparent;cursor:pointer;transition:transform .15s}
#story .ft-social-toggle:hover{transform:translateY(-3px)}
#story .ft-social-icon{display:block;width:100%;height:100%;border-radius:22%;background-size:contain;background-position:center;background-repeat:no-repeat}
#story .ft-social-toggle:has(.ft-social-icon){border-radius:22%}
#story [data-footer-social=wechat] .ft-social-icon{background-image:url("footer-wechat-v1.webp")}
#story [data-footer-social=xiaohongshu] .ft-social-icon{background-image:url("footer-xiaohongshu-v1.webp")}
#story [data-footer-social=douyin] .ft-social-icon{background-image:url("footer-douyin-v1.webp")}
#story .ft-social-letter{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#543820;color:#fff;font-size:18px;font-weight:700}
#story .ft-scan{display:flex;align-items:center;gap:.7cqw;margin-top:1.3cqw;border:0;padding:0;background:transparent;color:inherit;text-align:left;font-size:.95cqw;line-height:1.6}
#story .ft-scan>span{white-space:nowrap}
#story .ft-scan-symbol{display:grid;place-items:center;flex:none;width:4.7cqw;height:4.7cqw;border:1px solid #d6bda1;border-radius:8px;background:#fff;font-size:1.1cqw;font-weight:700;overflow:hidden}
#story .ft-scan-symbol .footer-qr-image{display:block;width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}
#story .ft-social-toggle[aria-pressed=true]{box-shadow:0 0 0 2px #fff5e2,0 0 0 4px #98683e}
#story .ft-qr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#story .ft-contact{position:absolute;left:28.6%;top:78%;width:33.2%;display:grid;grid-template-columns:1fr 1.15fr;gap:1.8cqw;color:#e6dac8;font-size:.98cqw;line-height:1.55}
#story .ft-contact h2{margin:0 0 .2cqw;color:#fff5e2;font:500 .98cqw/1.5 Arial, sans-serif}
#story .ft-contact a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
#story .ft-contact p{margin:0}
#story #footerHours{font-size:.94cqw;color:inherit;font-weight:400}
#story .ft-contact-mark{margin-right:.4cqw;font-size:1.2cqw}
#story .ft-copyright{position:absolute;top:93.5%;left:25%;right:12%;display:flex;justify-content:center;flex-wrap:wrap;gap:.7cqw;color:#deceb6;font-size:.97cqw;line-height:1.5}
#story .ft-copyright button{border:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}
#story .ft-illustration,#story .ft-brand,#story .ft-payments{display:none}
@media(min-width:1101px){
  #story .ft-links nav{width:100px;max-width:100%}
  #story .ft-copyright{margin-left:-70px}
  /* Keep the annotated 8px reduction relative to the fluid desktop width.
     Keep the size fluid; allow extra enabled icons to increase the height. */
  #story .ft-social{width:calc(12.795% - 8px);min-height:12.718cqw}
  #story .ft-social h2{margin-top:-6px;margin-bottom:.3cqw}
  #story .ft-social>p{margin-bottom:.4cqw}
  #story .ft-social-list{margin-top:15px}
  #story .ft-scan{margin-top:25px}
  #story .ft-scan>span{margin-top:10px;margin-left:5px}
  #story .ft-scan-symbol{margin:-10px -5px 0 -10px}
  #story .ft-links button,#story .ft-links a{font-size:max(12px,1.05cqw)}
  #story .ft-social>p,#story .ft-scan,#story .ft-contact,#story #footerHours,#story .ft-copyright{font-size:max(12px,.97cqw)}
  #story .ft-contact h2{font-size:max(12px,.98cqw)}
}
/* Keep the larger annotated gaps clear of the dark footer on small desktops. */
@media(min-width:1101px) and (max-width:1350px){
  #story .ft-social{min-width:146px;top:38%}
}
.footer-info-dialog{width:min(450px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border-radius:16px;padding:28px;background:#fffaf0;color:#422511}
.footer-info-dialog h2{font:700 22px/1.4 Arial, sans-serif;margin:0 32px 18px 0}
.footer-info-dialog p{font-size:15px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere;margin:12px 0 0}
.footer-info-dialog [hidden]{display:none!important}
.footer-info-dialog #footerDialogQr{text-align:center}
.footer-info-dialog #footerDialogQrImage:empty{display:none}
.footer-info-dialog .footer-qr-image{display:block;width:min(300px,100%);aspect-ratio:1;height:auto;object-fit:contain;background:#fff;padding:10px;margin:0 auto}
.footer-info-dialog #footerDialogQrStatus{font-size:13px;color:#66513f}
#story button.ft-scan-symbol{padding:0;color:inherit;font-family:inherit;cursor:zoom-in}
#story button.ft-scan-symbol:disabled{cursor:default;opacity:1}
.footer-info-dialog .dialog-close{width:44px;height:44px;right:6px;top:6px;color:#422511}
@media(max-width:1100px){
  #story.snack-footer{aspect-ratio:auto;background:#fff5e2;padding:36px 24px 0;display:flex;flex-direction:column;container-type:normal}
  #story .ft-benefits{position:static;width:100%;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 0 28px;border-bottom:1px solid #e8cfad}
  #story .ft-service-icon{display:block;width:80px;height:80px;margin:0 auto 12px;background-image:url("footer-design-v2.webp");background-size:1560.91% 832.73%;background-repeat:no-repeat}
  #story .ft-service-icon[data-icon=shield]{background-position:6.29% 13.03%}
  #story .ft-service-icon[data-icon=truck]{background-position:19.91% 13.03%}
  #story .ft-service-icon[data-icon=service]{background-position:33.54% 13.03%}
  #story .ft-service-icon[data-icon=gift]{background-position:47% 13.03%}
  #story .ft-benefits h2{font-size:21px}
  #story .ft-benefits p{white-space:normal;font-size:14px;margin:7px 0 0}
  #story .ft-links{position:static;width:100%;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px 0}
  #story .ft-links h2,#story .ft-social h2{font-size:19px;margin:0 0 12px}
  #story .ft-links nav{gap:0}
  #story .ft-links button,#story .ft-links a{display:flex;align-items:center;min-height:44px;font-size:15px;line-height:1.5}
  #story .ft-social{position:static;width:100%;padding:24px 0;min-height:0;border-top:1px solid #e8cfad;background:transparent}
  #story .ft-social>p{font-size:14px;margin:0 0 14px}
  #story .ft-social-list{gap:18px}
  #story .ft-social-toggle{width:46px;height:46px}
  #story .ft-scan{display:none}
  #story .ft-scan-symbol{width:144px;height:144px;font-size:15px}
  #story .ft-illustration{display:none}
  /* The supplied mobile artwork already includes the brand and payment marks.
     Keep live contact/copyright text in its blank areas, at the original ratio. */
  #story .ft-bottom{position:relative;margin:0 -24px;background:#382412 url("footer-mobile-background-v1.webp") center/100% 100% no-repeat;aspect-ratio:1164/1351;padding:0;color:#eee0c9}
  #story .ft-brand{display:block;position:absolute;left:4.7%;top:6%;width:90.6%;height:23%;background:none;margin:0}
  #story .ft-contact{position:absolute;left:4.7%;top:32%;width:90.6%;font-size:15px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px}
  #story .ft-contact>section{min-width:0}
  #story .ft-contact h2{font-size:16px;margin-bottom:8px}
  #story #footerHours{font-size:14px;margin-top:7px}
  #story .ft-contact-mark{font-size:18px;margin-right:7px}
  #story .ft-payments{display:block;position:absolute;left:4.7%;top:58%;width:90.6%;height:20%;background:none;margin:0}
  #story .ft-copyright{position:absolute;left:4.7%;right:4.7%;top:87%;font-size:12px;line-height:1.8;gap:8px;flex-wrap:nowrap;justify-content:flex-end;border:0;padding:0;margin:0;align-items:center;white-space:nowrap}
  #story .ft-copyright>button:first-of-type{margin-left:auto}
  #story .ft-copyright>button{flex:none}
  #story .ft-copyright button{min-height:44px}
}
@media(max-width:600px){
  #story.snack-footer{padding:28px 20px 0}
  #story .ft-benefits{grid-template-columns:1fr 1fr;gap:26px 12px}
  #story .ft-benefits h2{font-size:20px}
  #story .ft-benefits p{font-size:13px}
  #story .ft-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:10px 0;text-align:center}
  #story .ft-links nav{align-items:center}
  #story .ft-links button,#story .ft-links a{justify-content:center;text-align:center}
  #story .ft-links h2{font-size:16px;margin-bottom:8px;white-space:nowrap}
  #story .ft-links button,#story .ft-links a{font-size:13px;min-height:32px}
  /* Reuse two regions of the original artwork at its natural scale.
     Flow layout removes the artwork's fixed contact-to-payment blank area. */
  #story .ft-bottom{margin-inline:-20px;aspect-ratio:auto;background:#382412;min-height:min(400px,90vw);padding-bottom:4px}
  /* Crop only the artwork's top 60px of empty background; keep the full logo. */
  #story .ft-brand{position:static;width:100%;height:auto;aspect-ratio:1164/370;margin:0;background:url("footer-mobile-background-v1.webp") center 6.1162%/100% auto no-repeat}
  #story .ft-contact{position:static;width:90.6%;margin:0 auto}
  #story .ft-payments{position:static;width:100%;height:auto;aspect-ratio:1164/310;margin:10px 0 0;background:url("footer-mobile-background-v1.webp") center 73.9673%/100% auto no-repeat}
  #story .ft-copyright{position:static;width:90.6%;margin:0 auto;padding-top:0;border-top:1px solid #79654c}
  #story .ft-contact{font-size:13px;gap:12px}
  #story .ft-contact h2{font-size:15px}
  #story .ft-copyright{font-size:12px;gap:4px}
}
/* Share the three contact rows across both columns, including wrapped values. */
#story .ft-contact{grid-template-rows:auto auto auto;row-gap:4px}
#story .ft-contact>section{display:grid;grid-template-rows:subgrid;grid-row:1/span 3;grid-column:1;min-width:0}
#story .ft-contact>#footerEmailSection{grid-column:2}
#story .ft-contact h2,#story .ft-contact p,#story #footerHours{margin:0;align-self:start}
#story .ft-contact a{display:block;align-self:start}
@media(max-width:1100px){
  #story .ft-contact{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  #story .ft-contact a{white-space:nowrap}
  #story .ft-social{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px;align-items:center}
  #story .ft-social h2{grid-column:1;grid-row:1;margin:0}
  #story .ft-social-list{grid-column:2;grid-row:1;justify-content:flex-start;gap:10px;margin:0}
  #story .ft-social-toggle{width:44px;height:44px;flex:none}
  #story .ft-social>p{grid-column:1/-1;grid-row:2;margin:12px 0 0}
  #story .ft-social>.ft-social-empty{grid-row:3}
}
@media(max-width:600px){
  /* 35px inset on the annotated phone; reduce it on narrow screens for the icons. */
  #story .ft-social{padding:15px clamp(10px,calc(25vw - 78px),35px)}
  #story .ft-contact{font-size:clamp(10px,3.1vw,13px)}
  #story #footerEmail{font-size:clamp(9px,2.75vw,13px)}
  #story #footerHours{font-size:inherit;white-space:nowrap}
}
/* Mobile-only service strip: four equal columns, with live wrapping copy. */
@media(max-width:780px){
  #story .ft-benefits{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:-20px;padding-bottom:10px}
  #story .ft-benefits>section{position:relative;min-width:0;padding:0 5px}
  #story .ft-benefits>section+section::before{content:"";position:absolute;left:0;top:10px;bottom:4px;border-left:1px dashed #dfc9b1}
  #story .ft-service-icon{width:clamp(44px,13vw,68px);height:clamp(44px,13vw,68px);margin:0 auto 8px;background-size:contain;background-position:center}
  #story .ft-service-icon[data-icon=shield]{background-image:url("footer-benefit-shield.svg");background-position:center}
  #story .ft-service-icon[data-icon=truck]{background-image:url("footer-benefit-truck.svg");background-position:center}
  #story .ft-service-icon[data-icon=service]{background-image:url("footer-benefit-service.svg");background-position:center}
  #story .ft-service-icon[data-icon=gift]{background-image:url("footer-benefit-gift.svg");background-position:center}
  #story .ft-benefits h2{font-size:clamp(12px,3.4vw,17px);line-height:1.4;white-space:nowrap}
  #story .ft-benefits p{font-size:clamp(10px,2.65vw,13px);line-height:1.6;margin-top:5px;white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){#story .ft-social-toggle{transition:none}}