/* BN798 - Mall public page as a small website. Loaded inside the page body after bn699-shop.css, scoped to .ms (the wrapper
   MallSite::body adds) and to the page header when it carries .ms-nav.
   Direction: an antique mall's own vernacular - painted storefront lettering and hanging price tags. One loud element, the
   mall's name set like a shop sign; everything else quiet. Type: Big Shoulders Display for the sign and section names,
   Atkinson Hyperlegible for reading (many shoppers are older; it is built for legibility).
   Colour: bottle green #14532d (the BoothNest green, kept for continuity), sign-paint ink #1d211c, brass #c9992e for the
   one accent, enamel white #fbfaf6 ground, a soft rule #e3dfd3. */
.ms{--ms-ink:#1d211c;--ms-green:#14532d;--ms-green-2:#0f3f22;--ms-brass:#c9992e;--ms-brass-ink:#3a2a05;--ms-paper:#fbfaf6;--ms-line:#e3dfd3;--ms-soft:#4b5148;
  font-family:"Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ms-ink);background:var(--ms-paper);font-size:17px;line-height:1.55}
.ms .wrap{max-width:1120px}
@media (prefers-reduced-motion:no-preference){html:has(.ms){scroll-behavior:smooth}}

/* page header with section links */
.sf-top:has(.ms-nav) .wrap{max-width:1120px;gap:14px}
.sf-top:has(.ms-nav) a.home{font-family:"Big Shoulders Display","Atkinson Hyperlegible",sans-serif!important;font-weight:800!important;font-size:22px!important;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ms-nav{display:flex;gap:4px;align-items:center;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;font-family:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif}
.ms-nav::-webkit-scrollbar{display:none}
.ms-nav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:#1d211c;text-decoration:none;font-weight:700;font-size:15.5px}
.ms-nav a:hover{background:#eef2ec}
.ms-nav a:focus-visible,.ms a:focus-visible,.ms button:focus-visible,.ms summary:focus-visible{outline:3px solid #c9992e;outline-offset:2px}

/* hero: the sign */
.ms-hero{position:relative;background:var(--ms-green);color:#fff;overflow:hidden;isolation:isolate}
.ms-hero-in{max-width:1120px;margin:0 auto;padding:clamp(40px,7vw,88px) 20px clamp(34px,5vw,64px);position:relative;z-index:2}
.ms-hero h1{font-family:"Big Shoulders Display","Atkinson Hyperlegible",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.92;font-size:clamp(46px,9.2vw,118px);margin:0;max-width:14ch;text-wrap:balance;color:#fff}
.ms-lede{font-size:clamp(18px,2vw,22px);line-height:1.45;max-width:46ch;margin:18px 0 0;color:#e6efe8}
.ms-logo{margin:0 0 18px}
.ms-logo .sh-logo{width:72px;height:72px;border-radius:14px;padding:5px;background:#fff;border:0}
.ms-cta{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.ms-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:12px;font-weight:700;font-size:17px;text-decoration:none;color:#fff;border:2px solid rgba(255,255,255,.75);background:transparent}
.ms-btn:hover{background:rgba(255,255,255,.12)}
.ms-btn-solid{background:var(--ms-brass);border-color:var(--ms-brass);color:var(--ms-brass-ink)}
.ms-btn-solid:hover{background:#d8a93c}
/* with a cover photo the sign sits on the photograph */
.ms-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ms-has-cover .ms-hero{background:#10140f}
.ms-has-cover .ms-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,16,11,.30) 0%,rgba(12,16,11,.42) 45%,rgba(12,16,11,.86) 100%)}
/* BN801: the default pictures are drawings with lit windows and pale objects, so they get a slightly heavier shade */
.ms-default-cover .ms-hero::after{background:linear-gradient(180deg,rgba(10,22,14,.40) 0%,rgba(10,22,14,.62) 50%,rgba(10,22,14,.90) 100%)}
.ms-has-cover .ms-hero-in{padding-top:clamp(96px,14vw,180px)} /* BN800: shorter, so the sign and the first items share the screen */

/* band of quick facts, like the strip under a shop sign */
.ms-band{list-style:none;margin:0;padding:0 20px;background:var(--ms-ink);color:#f3e7c6;display:flex;justify-content:center;flex-wrap:wrap;font-weight:700;font-size:16px}
.ms-band li{padding:14px 18px;white-space:nowrap}
.ms-band li+li{border-left:1px solid rgba(243,231,198,.28)}
@media (max-width:640px){.ms-band{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 8px}.ms-band::-webkit-scrollbar{display:none}}

/* sections */
.ms-sec{padding:clamp(34px,5vw,60px) 0 0;scroll-margin-top:76px}
.ms-sec:last-child{padding-bottom:clamp(40px,6vw,72px)}
.ms-sec-head{margin-bottom:14px}
.ms-sec h2,.ms-sec-head h2{font-family:"Big Shoulders Display","Atkinson Hyperlegible",sans-serif!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.01em;line-height:1;font-size:clamp(32px,4.4vw,48px)!important;margin:0 0 8px!important;color:var(--ms-ink)}
.ms-sec-head p,.ms-sec section>p{color:var(--ms-soft);max-width:62ch;margin:0}
.ms #visit,.ms #ask{background:#fff;border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line);margin-top:clamp(34px,5vw,60px);padding-bottom:clamp(30px,4vw,48px)}
.ms #visit+#ask{margin-top:0;border-top:0}
.ms #ask h3,.ms #visit h3{font-size:1.05rem}

/* the listing, quieter and more like tags on a shelf */
.ms .sh-dir{padding:6px 0 12px}
.ms .sf-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:18px!important}
.ms .sf-card{border-radius:6px!important;border-color:var(--ms-line)!important}
.ms .sf-ph{background:#efece3!important}
.ms .sf-info{padding:12px 14px 14px!important;gap:6px}
.ms .sf-title{font-size:16px!important;font-weight:700}
.ms .sf-price{font-family:"Big Shoulders Display","Atkinson Hyperlegible",sans-serif!important;font-size:26px!important;font-weight:800!important;letter-spacing:.01em;line-height:1}
.ms .sh-booth{align-self:flex-start;justify-self:start;background:#f3e7c6;color:var(--ms-brass-ink);font-size:12.5px;font-weight:700;padding:3px 9px 3px 16px;border-radius:3px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms .sh-booth::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(58,42,5,.35)}
.ms .btn.solid{background:var(--ms-green)!important;border-color:var(--ms-green)!important}
.ms .sf-count{font-size:15px}

/* compact: a search, one booth, or a later page - keep the results in view */
.ms-compact .ms-hero-in{padding:22px 20px 20px}
.ms-compact .ms-hero h1{font-size:clamp(30px,5vw,48px);max-width:none}
.ms-compact .ms-logo{display:none}
.ms-compact .ms-sec{padding-top:24px}

/* footer */
main:has(.ms)~.sf-foot,main:has(.ms)~footer{background:#1d211c!important;color:#cfd6cc!important;border-top:0!important}
main:has(.ms)~.sf-foot a,main:has(.ms)~footer a{color:#f3e7c6!important}
/* phones: two items across so the shelf can be scanned */
@media (max-width:640px){.ms .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.ms .sf-info{padding:8px 10px 10px!important}.ms .sf-title{font-size:14.5px!important}.ms .sf-price{font-size:22px!important}.ms .sh-booth{font-size:11.5px;padding-right:6px}}
@media (max-width:640px){.ms{font-size:16.5px}.ms-cta .ms-btn{flex:1 1 100%}.sf-top:has(.ms-nav) .wrap{flex-wrap:wrap;row-gap:0;padding-top:6px}.sf-top:has(.ms-nav) a.home{flex:1 1 100%}.ms-nav{flex:1 1 100%;margin:0 -8px}}

/* BN804: photo gallery */
.ms-gallery{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px}
.ms-gallery-1{grid-template-columns:minmax(0,640px)}
.ms-gallery-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ms-gallery-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-gallery figure{margin:0}
.ms-gallery a{display:block;border-radius:6px;overflow:hidden;background:#efece3;aspect-ratio:4/3}
.ms-gallery img{display:block;width:100%;height:100%;object-fit:cover}
.ms-gallery figcaption{font-size:14.5px;color:#4b5148;margin-top:6px;line-height:1.35}
.ms #photos h2{margin-bottom:10px!important}
@media (max-width:900px){.ms-gallery,.ms-gallery-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ms-gallery{gap:8px}}

/* BN805: sale days notice under the sign - a brass strip, like a sale tag tied to the shelf */
.ms-sale{background:#f3e7c6;color:#3a2a05;border-bottom:1px solid #e2cf96}
.ms-sale ul{list-style:none;margin:0;padding:12px 0;display:grid;gap:6px}
.ms-sale li{font-size:17px;line-height:1.4}
.ms-sale strong{display:inline-block;background:#3a2a05;color:#f3e7c6;font-size:13.5px;font-weight:700;padding:2px 9px;border-radius:3px;margin-right:8px;vertical-align:2px}
.ms-sale .ms-sale-now strong{background:#9f2d20;color:#fff}

/* BN806: a strip only the signed-in owner sees on their own public pages */
.ms-owner{background:#1d211c;color:#e9efe6;font-size:15px}
.ms-owner .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.ms-owner-links{display:flex;flex-wrap:wrap;gap:6px 14px}
.ms-owner a{color:#f3e7c6;font-weight:700;min-height:36px;display:inline-flex;align-items:center}