/* Mobile shopping: readable controls, reachable bag, and less travel to products. */
.mobile-bar{display:none}
/* Preserve the supplied artwork; use its wordmark in the compact header. */
header .brand-logo{position:relative;display:block;width:220px;height:65px;overflow:hidden}
header .brand-logo img{position:absolute;width:270px;height:270px;max-width:none;left:-26px;top:-176px}
footer .brand-logo{display:block;width:190px;line-height:0}
footer .brand-logo img{display:block;width:100%;height:auto}
@media(max-width:750px){header .brand-logo{width:180px;height:50px}header .brand-logo img{width:222px;height:222px;left:-21px;top:-145px}footer .brand-logo{width:170px}}
@media(max-width:350px){header .brand-logo{width:160px;height:46px}header .brand-logo img{width:197px;height:197px;left:-18px;top:-129px}}
.notice{background:#ffdb58;color:#503014}
.mark{background:#f97316;color:#292019;box-shadow:4px 4px 0 #ffdb58;border-radius:12px 12px 12px 3px;font-weight:800}
.brand>span{color:#9a3412}.brand small{color:#725642}
.hero{border-top:5px solid #f97316;border-radius:14px;background:linear-gradient(115deg,#ffe29a 0%,#fff0cf 55%,#fff8ee 100%)}
.hero h1{color:#74300d;font-family:Arial,"Microsoft YaHei",sans-serif;font-weight:750;letter-spacing:1px}
.primary,.mobile-bag{box-shadow:0 3px 0 #9a3412;font-weight:600}
.price-row strong{color:#b83c0b}
.tag{background:#ffdf76;color:#56300e;border-radius:5px}
.section-heading h2{border-left:5px solid #f97316;padding-left:12px}
.search{background:#fff7ed}.product-photo{background:#faf7f2}
.add:hover{background:#c2410c;color:#fff}
#filters button.active{background:#c2410c;color:#fff}
.add{width:auto;min-height:44px;height:auto;padding:10px 12px;border-radius:7px;font-size:14px}
body:has(dialog[open]){overflow:hidden}
dialog{max-height:90vh;max-height:90dvh;overscroll-behavior:contain}
.cart-info{min-width:0}
.detail-feedback{min-height:1.5em;color:#c2410c;font-size:14px}
.search:focus-within{outline:2px solid #c2410c;outline-offset:2px}
@media(max-width:750px){
  html{scroll-padding-top:145px}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .notice{padding:8px 16px;font-size:12px;letter-spacing:0}
  header{position:sticky;top:0;z-index:10;background:#fff;padding:12px 16px;gap:10px;box-shadow:0 2px 12px #9a341208}
  .brand{gap:9px}.brand>span{font-size:20px;letter-spacing:2px}.brand small{font-size:10px;letter-spacing:.7px}
  .mark{height:38px;width:38px;font-size:24px;border-radius:7px}
  .cart-button{min-height:44px;padding:8px 0 8px 8px;font-size:14px}
  .search{border-radius:10px;padding:0 12px;min-height:46px;gap:8px}
  .search input{font-size:16px;min-height:46px;min-width:0}
  main{padding:16px 16px 28px}
  .hero{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:0;border-radius:12px}
  .hero-copy{padding:20px 16px}.hero-copy>.eyebrow,.hero-copy>p:not(.eyebrow),.image-caption,.vertical{display:none}
  .hero h1{font-size:clamp(28px,7.4vw,42px);line-height:1.3;margin-bottom:16px;letter-spacing:0}
  .hero .primary{min-height:44px;font-size:14px;padding:10px 12px;gap:6px}
  .hero-image{min-height:0}.hero-image>img{object-fit:cover}
  .shop{margin-top:26px}.section-heading{margin-bottom:12px}.section-heading .eyebrow{display:none}.section-heading h2{font-size:24px;letter-spacing:1px}
  .toolbar{gap:8px;padding-bottom:6px;display:block}
  #filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;gap:8px;padding:4px 2px 9px;scrollbar-width:thin;scrollbar-color:#fdba74 transparent}
  #filters button{flex:0 0 auto;min-height:44px;padding:10px 16px;font-size:14px;background:#fff4e8;color:#86421d;scroll-snap-align:start}
  #filters button.active{background:#c2410c;color:#fff}
  .sort-label{justify-content:flex-end;min-height:44px;font-size:14px;gap:4px}.sort-label select{font-size:16px;min-height:44px;max-width:100%;padding:8px}
  .result-count{font-size:12px;margin:12px 0;color:#796b60}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}
  .product{min-width:0}.product-photo{aspect-ratio:1;border-radius:9px}.tag{font-size:12px;top:8px;left:8px;padding:5px 7px}
  .category{font-size:12px;margin:12px 0 6px;color:#796b60}.product h3{font-size:16px;line-height:1.5;margin-bottom:8px;overflow-wrap:anywhere}
  .product .sub{display:none}.price-row{flex-wrap:wrap;gap:10px}.price-row strong{font-size:18px;font-weight:600}
  .add{width:100%;min-height:44px;border-radius:7px;font-size:14px;background:#fff2e8;color:#c2410c;border-color:#fed7aa}
  footer{margin:0 16px;padding:24px 0;gap:15px}footer>small{font-size:12px;color:#796b60}
  .mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e0e7e2;box-shadow:0 -4px 20px #9a341208}
  .mobile-bar>a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 12px;font-size:14px;color:#86421d;white-space:nowrap}
  .mobile-bag{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 12px;min-height:48px;background:#c2410c;border:0;border-radius:9px;color:white;padding:12px 16px;font-size:16px}
  .mobile-bag strong{font-size:15px;font-weight:500}.mobile-bag span{white-space:nowrap}
  dialog{margin:auto auto 0;width:100%;max-width:100%;max-height:90vh;max-height:90dvh;border-radius:18px 18px 0 0;padding:16px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;box-shadow:0 -12px 60px #0003}
  dialog .close{width:44px;height:44px;min-width:44px;font-size:28px}
  #detail>.close{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #9a341210}
  .dialog-head{position:sticky;top:-16px;background:#fff;z-index:2;padding:10px 0;border-bottom:1px solid #e8ede9;gap:15px}
  .dialog-head h2{font-size:22px;margin:0}.detail-photo{height:210px;margin-top:12px;border-radius:10px}
  .detail-desc{font-size:16px;line-height:1.8}.detail-actions{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));background:#fff;padding:12px 0 calc(16px + env(safe-area-inset-bottom));border-top:1px solid #e5ebe7}
  .detail-feedback{margin:0 0 8px}.detail-feedback:empty{display:none}
  .primary.full{min-height:50px;border-radius:9px;font-size:16px}
  .cart-item{gap:12px}.cart-item img{width:56px;height:72px}.cart-info h3{font-size:16px;line-height:1.5}
  .quantity{gap:8px;flex-wrap:wrap}.quantity button{min-width:44px;height:44px;border-radius:6px;font-size:18px}.quantity span{min-width:20px;text-align:center}.quantity .remove{font-size:14px;min-width:44px}
  .demo-note{font-size:14px}.total{padding-top:18px;font-size:17px}
  #toast{bottom:calc(92px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);width:max-content;line-height:1.6;z-index:30;padding:12px 18px}
}
@media(max-width:350px){.brand>span{font-size:18px}.brand small{font-size:9px}.hero-copy{padding:16px 12px}.hero .primary{font-size:13px}.products{gap:20px 10px}.tag{font-size:11px}.mobile-bar{gap:4px;padding-left:12px;padding-right:12px}.mobile-bag{padding:12px}.quantity .remove{margin-left:0}}
@media(max-height:500px) and (max-width:750px){header{position:relative}.hero{display:none}html{scroll-padding-top:12px}dialog{max-height:96dvh}.detail-photo{height:140px}}

