/* Milestone 3: full-bleed, scrollbar-free signage. */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden!important;overscroll-behavior:none;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,#display::-webkit-scrollbar,.scroll::-webkit-scrollbar{display:none!important;width:0;height:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#101510;background:#fff}
#display{--board-bg:#fff;--board-text:#111;--board-accent:#198754;position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:var(--board-bg);color:var(--board-text)}
.display-flash{padding:clamp(18px,3vw,64px) clamp(24px,4vw,90px) clamp(120px,16vh,185px)}
.flash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,110px);align-items:center;height:100%;min-height:0}
.flash-media{display:grid;place-items:center;min-width:0;min-height:0;height:100%}
.product-photo{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.flash-media .image-placeholder{width:100%;min-height:35vh;display:grid;place-items:center}
.image-placeholder{background:#eef3ef;border-radius:12px;text-align:center;color:#657267;padding:1rem;font-size:clamp(.9rem,1.5vw,1.5rem)}
.flash-detail{min-width:0;max-height:100%;overflow:hidden}
.flash h1{font-size:clamp(2rem,4.5vw,6rem);line-height:1.08;margin:0 0 .8em;font-weight:850;overflow-wrap:anywhere}
.flash-description{font-size:clamp(1.1rem,2.25vw,2.6rem);line-height:1.35;margin:0 0 1.15em}
.hero-pricing{display:flex;flex-direction:column;gap:.15em}
.price{font-size:clamp(2rem,4.7vw,5.8rem);font-weight:900;line-height:1.1;white-space:nowrap}
.old{color:#737873;text-decoration:line-through;font-weight:550;font-size:clamp(1.3rem,2.8vw,3rem)}
.sale-price{color:var(--board-accent)}
.banner{position:absolute;inset:auto 0 0;background:var(--board-accent);color:#fff;text-align:center;display:grid;place-items:center;align-content:center;min-height:clamp(105px,15vh,180px);padding:14px 20px;box-shadow:0 -5px 25px #0002;animation:sale-pulse 2.8s ease-in-out infinite}
.banner-title{font-size:clamp(2.2rem,5vw,5.8rem);font-weight:950;letter-spacing:.05em;line-height:1}
.sale-note{font-size:clamp(.95rem,1.55vw,1.7rem);font-weight:550;margin-top:.5rem}
@keyframes sale-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.display-scrolling{display:flex;flex-direction:column;padding:clamp(14px,2.4vw,45px) clamp(20px,4vw,85px)}
.board-heading{flex:none;border-bottom:clamp(3px,.4vw,7px) solid var(--board-accent);padding-bottom:clamp(10px,1.6vh,23px);margin-bottom:clamp(9px,1.1vh,19px)}
.board-heading h1{font-size:clamp(2rem,3.7vw,5rem);line-height:1.1;margin:0;overflow-wrap:anywhere}
.scroll{flex:1;min-height:0;overflow:hidden;position:relative;scrollbar-width:none}
.scroll-track{display:block;will-change:transform;transform:translate3d(0,0,0)}
.scroll-group{display:block}
.item{display:flex;align-items:center;gap:clamp(12px,2vw,35px);min-height:clamp(95px,13vh,155px);padding:clamp(9px,1.45vh,20px) 0;border-bottom:1px solid #d9dfd9}
.item-thumb{width:clamp(64px,7vw,116px);height:clamp(65px,9vh,105px);flex:none}
.item-thumb .image-placeholder{width:100%;height:100%;font-size:clamp(.65rem,.9vw,1rem);padding:6px}
.item-detail{flex:1;min-width:0}
.item-title{display:block;font-size:clamp(1.35rem,2.35vw,3rem);line-height:1.16;font-weight:800;overflow-wrap:anywhere}
.item-description{margin:.3em 0 0;font-size:clamp(.9rem,1.4vw,1.8rem);line-height:1.2;color:#535b53;overflow-wrap:anywhere}
.item-pricing{flex:none;display:flex;flex-direction:column;align-items:flex-end;min-width:max-content}
.item-pricing .price{font-size:clamp(1.35rem,2.45vw,3.15rem)}
.item-pricing .old{font-size:clamp(.95rem,1.45vw,1.9rem)}
.empty-state{display:grid;place-items:center;text-align:center;height:100%;margin:0;font-size:clamp(2rem,4vw,5rem)}
@media(max-width:700px){.display-flash{padding:18px 22px 115px}.flash{grid-template-columns:1fr;grid-template-rows:minmax(0,40%) minmax(0,60%);gap:10px}.flash h1{font-size:clamp(1.9rem,5.2vw,3.4rem);margin:0 0 .4em}.flash-description{font-size:clamp(1rem,2.6vw,1.4rem);margin:0 0 .4em}.flash-media .image-placeholder{min-height:20vh}.item{gap:8px}.item-description{font-size:clamp(.8rem,2.2vw,1.1rem)}}
@media(prefers-reduced-motion:reduce){.banner{animation:none}}

/* v1.13: image-forward scrolling and column-major static signage. */
.item-large{min-height:clamp(190px,26vh,310px);padding:clamp(14px,2.5vh,38px) 0;gap:clamp(18px,3vw,50px)}
.item-large .item-thumb{width:clamp(145px,20vw,370px);height:clamp(160px,23vh,275px);display:grid;place-items:center}
.item-large .item-title{font-size:clamp(1.5rem,2.6vw,3.8rem)}
.item-large .item-description{font-size:clamp(.9rem,1.55vw,1.9rem)}
.display-static{display:flex;flex-direction:column;padding:clamp(12px,2vw,40px) clamp(16px,3vw,65px)}
.static-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--static-columns),minmax(0,1fr));grid-template-rows:repeat(var(--static-rows),minmax(0,1fr));grid-auto-flow:column;gap:clamp(3px,.55vw,14px);overflow:hidden}
.static-item{min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(4px,.65vw,13px);border:1px solid #d9dfd9;border-left:4px solid var(--board-accent);border-radius:5px;overflow:hidden}
.static-detail{min-height:0;overflow:hidden}
.static-name{display:block;font-weight:800;font-size:clamp(.9rem,1.85vw,2.4rem);line-height:1.13;overflow-wrap:anywhere}
.static-description{font-size:clamp(.7rem,1.07vw,1.4rem);line-height:1.15;margin:.25em 0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.static-item .item-pricing{align-items:flex-start;min-width:0;max-width:100%;font-size:inherit}
.static-item .price{font-size:clamp(.95rem,1.65vw,2rem);white-space:normal}
.static-item .old{font-size:clamp(.75rem,1.05vw,1.25rem)}
.static-vertical .static-name{font-size:clamp(.8rem,2.5vh,2.1rem)}
.static-vertical .static-item{padding:clamp(4px,.7vh,12px)}
.static-dense .static-item{padding:2px 5px;border-left-width:2px}
.static-dense .static-name{font-size:clamp(.72rem,1.35vw,1.5rem)}
.static-dense .static-description{display:none}
.static-dense .price{font-size:clamp(.7rem,1.2vw,1.5rem)}
.static-dense .old{font-size:clamp(.65rem,.9vw,1rem)}
.static-very-dense .static-item{border-radius:0;padding:1px 3px}
.static-very-dense .static-name{font-size:clamp(.58rem,1vw,1.1rem)}
.static-very-dense .price{font-size:clamp(.58rem,.95vw,1.1rem)}
@media(max-width:700px){.item-large .item-thumb{width:clamp(90px,27vw,160px);height:clamp(135px,23vh,235px)}.item-large{min-height:clamp(175px,30vh,260px)}.static-grid{gap:3px}.static-item{padding:3px}}

/* v1.14: card content never occupies the same vertical space as sale pricing.
   Font sizes are set together by static-fit.js after measuring actual card sizes. */
.static-grid{--fit-name:36px;--fit-price:30px;--fit-old:18px;--fit-description:18px;--fit-gap:3px}
.static-item{justify-content:center;align-items:stretch;gap:var(--fit-gap);padding:clamp(3px,.45vw,9px);overflow:hidden}
.static-detail{flex:0 0 auto;min-height:0;overflow:visible;min-width:0}
.static-name,.static-vertical .static-name,.static-dense .static-name,.static-very-dense .static-name{font-size:var(--fit-name);line-height:1.12;overflow-wrap:anywhere;word-break:normal}
.static-description{font-size:var(--fit-description);line-height:1.12;margin:2px 0 0;display:none}
.static-item .item-pricing{display:flex;flex:0 0 auto;gap:0;min-width:0;min-height:0;align-items:flex-start;justify-content:flex-start;overflow:visible}
.static-item .price,.static-dense .price,.static-very-dense .price{font-size:var(--fit-price);line-height:1.08;white-space:nowrap}
.static-item .old,.static-dense .old{font-size:var(--fit-old);line-height:1.06;white-space:nowrap}
.static-dense .static-item,.static-very-dense .static-item{padding:2px 4px}

/* v1.16 — image-scrolling thumbnails: enforce a hard clipping viewport.
   The placeholder and real photo must occupy exactly the same rectangle. */
.item-thumb {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  flex-shrink: 0;
  isolation: isolate;
  border-radius: 12px;
  background: #eef3ef;
}
.item-thumb > .product-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  overflow: clip;
}
.item-thumb > .image-placeholder {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}