
/* ==========================================================
   HEDA SHELVES | SUPERMARKET CATALOG READER
   Version: 2026

   12 original catalog images
   Responsive desktop / tablet / mobile
   Interactive navigation and zoom
   No external JavaScript libraries

   Scope: #heda-supermarket-catalog-2026
========================================================== */

#heda-supermarket-catalog-2026{
  --sc-blue:#175cc7;
  --sc-blue-dark:#114998;
  --sc-navy:#192d3d;
  --sc-ink:#2a3944;
  --sc-muted:#687985;
  --sc-line:#dde6ed;
  --sc-soft:#f3f7fa;
  --sc-white:#ffffff;
  width:100%;
  margin:0;
  padding:0;
  background:#fff;
  color:var(--sc-ink);
  font:14px/1.7 Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#heda-supermarket-catalog-2026,
#heda-supermarket-catalog-2026 *{
  box-sizing:border-box;
}

#heda-supermarket-catalog-2026 .sc-container{
  width:calc(100% - 36px);
  max-width:1180px;
  margin:0 auto;
}

#heda-supermarket-catalog-2026 h2,
#heda-supermarket-catalog-2026 h3,
#heda-supermarket-catalog-2026 p,
#heda-supermarket-catalog-2026 figure{
  margin:0;
  padding:0;
}

#heda-supermarket-catalog-2026 section{
  margin:0;
}

#heda-supermarket-catalog-2026 a{
  text-decoration:none;
}

#heda-supermarket-catalog-2026 button{
  font-family:Arial,Helvetica,sans-serif;
}

#heda-supermarket-catalog-2026 a:focus-visible,
#heda-supermarket-catalog-2026 button:focus-visible{
  outline:3px solid #8ebcff;
  outline-offset:3px;
}

/* ==========================================================
   01. COMPACT PAGE INTRODUCTION
========================================================== */

#heda-supermarket-catalog-2026 .sc-intro{
  padding:18px 0 17px;
}

#heda-supermarket-catalog-2026 .sc-intro-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--sc-line);
}

#heda-supermarket-catalog-2026 .sc-intro-line strong{
  color:var(--sc-navy);
  font-size:12px;
  font-weight:800;
  letter-spacing:.7px;
}

#heda-supermarket-catalog-2026 .sc-intro-line span{
  color:var(--sc-muted);
  font-size:11px;
}

#heda-supermarket-catalog-2026 .sc-intro-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding-top:16px;
}

#heda-supermarket-catalog-2026 .sc-intro-summary p{
  max-width:780px;
  color:var(--sc-muted);
  font-size:13px;
  line-height:1.65;
}

#heda-supermarket-catalog-2026 .sc-intro-summary a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:37px;
  padding:8px 13px;
  border:1px solid #cad9ec;
  border-radius:4px;
  color:var(--sc-blue-dark);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  transition:background .2s ease;
}

#heda-supermarket-catalog-2026 .sc-intro-summary a:hover{
  background:#eff5ff;
}

/* ==========================================================
   02. VIEWER TOOLBAR
========================================================== */

#heda-supermarket-catalog-2026 .sc-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:13px;
  padding:13px 17px;
  background:var(--sc-navy);
  border-radius:5px 5px 0 0;
}

#heda-supermarket-catalog-2026 .sc-toolbar-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  min-width:0;
}

#heda-supermarket-catalog-2026 .sc-toolbar-title strong{
  color:#fff;
  font-size:12px;
  font-weight:800;
}

#heda-supermarket-catalog-2026 .sc-toolbar-title span{
  color:#b9ccda;
  font-size:11px;
  white-space:nowrap;
}

#heda-supermarket-catalog-2026 .sc-controls{
  display:none;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

#heda-supermarket-catalog-2026.sc-enhanced .sc-controls{
  display:flex;
}

#heda-supermarket-catalog-2026 .sc-control-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  min-height:37px;
  padding:8px 12px;
  border:1px solid #526779;
  border-radius:4px;
  background:#263d50;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}

#heda-supermarket-catalog-2026 .sc-control-button:hover{
  background:var(--sc-blue);
  border-color:var(--sc-blue);
}

#heda-supermarket-catalog-2026 .sc-control-button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

#heda-supermarket-catalog-2026 .sc-control-button:disabled:hover{
  background:#263d50;
  border-color:#526779;
}

#heda-supermarket-catalog-2026 .sc-page-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:89px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.7px;
  font-variant-numeric:tabular-nums;
}

#heda-supermarket-catalog-2026 .sc-zoom-button{
  background:transparent;
}

/* ==========================================================
   03. CATALOG IMAGE READER
========================================================== */

#heda-supermarket-catalog-2026 .sc-reader{
  background:#e8eef3;
  border:1px solid var(--sc-line);
  border-top:0;
}

#heda-supermarket-catalog-2026 .sc-stage{
  width:100%;
  padding:20px;
  overflow:auto;
  background:#e8eef3;
  overscroll-behavior:contain;
  scroll-margin-top:80px;
}

#heda-supermarket-catalog-2026 .sc-spread{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 auto 22px;
  scroll-margin-top:80px;
}

#heda-supermarket-catalog-2026 .sc-spread:last-child{
  margin-bottom:0;
}

#heda-supermarket-catalog-2026 .sc-image-link{
  display:block;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 18px rgba(21,42,58,.10);
}

#heda-supermarket-catalog-2026 .sc-image-link img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  object-fit:contain;
}

#heda-supermarket-catalog-2026 .sc-spread figcaption{
  max-width:1000px;
  margin:0 auto;
  padding:11px 14px;
  background:#fff;
  border-top:1px solid var(--sc-line);
  color:var(--sc-muted);
  font-size:11px;
  line-height:1.6;
  text-align:center;
}

/* JavaScript-enabled one-spread reader */

#heda-supermarket-catalog-2026.sc-enhanced .sc-spread{
  display:none;
  margin-bottom:0;
}

#heda-supermarket-catalog-2026.sc-enhanced .sc-spread.sc-current{
  display:block;
}

/* Zoom-in reading mode */

#heda-supermarket-catalog-2026.sc-zoomed .sc-stage{
  overflow:auto;
}

#heda-supermarket-catalog-2026.sc-zoomed .sc-image-link{
  width:max(160%, 1000px);
  max-width:none;
  margin-left:0;
  margin-right:0;
}

#heda-supermarket-catalog-2026.sc-zoomed .sc-image-link img{
  width:100%;
  max-width:none;
}

#heda-supermarket-catalog-2026.sc-zoomed .sc-spread figcaption{
  max-width:none;
}

/* ==========================================================
   04. BOTTOM PAGE CONTROLS
========================================================== */

#heda-supermarket-catalog-2026 .sc-reader-bottom{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:14px 17px;
  border-top:1px solid var(--sc-line);
  background:#fff;
}

#heda-supermarket-catalog-2026.sc-enhanced .sc-reader-bottom{
  display:flex;
}

#heda-supermarket-catalog-2026 .sc-reader-bottom p{
  color:var(--sc-muted);
  font-size:12px;
}

#heda-supermarket-catalog-2026 .sc-bottom-buttons{
  display:flex;
  gap:9px;
}

#heda-supermarket-catalog-2026 .sc-bottom-buttons button{
  padding:9px 16px;
  border:1px solid var(--sc-line);
  border-radius:4px;
  background:var(--sc-soft);
  color:var(--sc-ink);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

#heda-supermarket-catalog-2026 .sc-bottom-buttons button:hover{
  background:#e6f0ff;
  border-color:#bed0ea;
}

#heda-supermarket-catalog-2026 .sc-bottom-buttons button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

/* ==========================================================
   05. THUMBNAIL NAVIGATION
========================================================== */

#heda-supermarket-catalog-2026 .sc-thumbnails{
  padding:20px 0 10px;
}

#heda-supermarket-catalog-2026 .sc-thumbnails-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

#heda-supermarket-catalog-2026 .sc-thumbnails-heading strong{
  color:var(--sc-ink);
  font-size:13px;
  font-weight:800;
}

#heda-supermarket-catalog-2026 .sc-thumbnails-heading span{
  color:var(--sc-muted);
  font-size:11px;
}

#heda-supermarket-catalog-2026 .sc-thumb-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:116px;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 13px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}

#heda-supermarket-catalog-2026 .sc-thumb{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  border:2px solid var(--sc-line);
  border-radius:4px;
  background:#fff;
  scroll-snap-align:start;
  transition:border-color .2s ease;
}

#heda-supermarket-catalog-2026 .sc-thumb:hover{
  border-color:#8ab2e6;
  text-decoration:none;
}

#heda-supermarket-catalog-2026 .sc-thumb.sc-current{
  border-color:var(--sc-blue);
}

#heda-supermarket-catalog-2026 .sc-thumb img{
  display:block;
  width:100%;
  aspect-ratio:1000/647;
  object-fit:contain;
  background:#f7f9fb;
}

#heda-supermarket-catalog-2026 .sc-thumb span{
  display:block;
  padding:6px 4px;
  color:var(--sc-muted);
  font-size:10px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}

#heda-supermarket-catalog-2026 .sc-thumb.sc-current span{
  background:#edf4ff;
  color:var(--sc-blue-dark);
}

/* ==========================================================
   06. READING INSTRUCTIONS
========================================================== */

#heda-supermarket-catalog-2026 .sc-help{
  padding:18px 0 35px;
}

#heda-supermarket-catalog-2026 .sc-help-inner{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:17px 19px;
  background:var(--sc-soft);
  border-left:3px solid var(--sc-blue);
}

#heda-supermarket-catalog-2026 .sc-help-symbol{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:50%;
  color:var(--sc-blue);
  font-size:15px;
  font-weight:800;
}

#heda-supermarket-catalog-2026 .sc-help p{
  color:var(--sc-muted);
  font-size:12px;
  line-height:1.75;
}

#heda-supermarket-catalog-2026 .sc-help strong{
  color:var(--sc-ink);
}

/* ==========================================================
   07. RELATED PRODUCTS
========================================================== */

#heda-supermarket-catalog-2026 .sc-related{
  padding:28px 0;
  border-top:1px solid var(--sc-line);
}

#heda-supermarket-catalog-2026 .sc-related-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:17px;
}

#heda-supermarket-catalog-2026 .sc-related h3{
  color:var(--sc-ink);
  font-size:18px;
  font-weight:750;
  margin-bottom:5px;
}

#heda-supermarket-catalog-2026 .sc-related p{
  color:var(--sc-muted);
  font-size:12px;
}

#heda-supermarket-catalog-2026 .sc-related a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:11px 19px;
  border:1px solid #cbd9e8;
  border-radius:4px;
  color:var(--sc-blue-dark);
  font-size:12px;
  font-weight:800;
}

#heda-supermarket-catalog-2026 .sc-related a:hover{
  background:#f0f5ff;
}

/* ==========================================================
   08. NATIVE HEDA INQUIRY POPUP
========================================================== */

#heda-supermarket-catalog-2026 .sc-cta{
  padding:43px 0;
  background:var(--sc-navy);
  border-top:4px solid var(--sc-blue);
}

#heda-supermarket-catalog-2026 .sc-cta-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
}

#heda-supermarket-catalog-2026 .sc-cta h2{
  margin:0 0 9px;
  color:#fff;
  font-size:clamp(23px,2.8vw,31px);
  line-height:1.2;
  font-weight:750;
}

#heda-supermarket-catalog-2026 .sc-cta p{
  max-width:720px;
  color:#dae4ed;
  font-size:13px;
  line-height:1.7;
}

#heda-supermarket-catalog-2026 a.sc-quote{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:210px;
  min-height:52px;
  width:auto!important;
  margin:0!important;
  padding:13px 26px!important;
  border:1px solid var(--sc-blue)!important;
  border-radius:4px!important;
  background:var(--sc-blue)!important;
  color:#fff!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font:800 12px/1.5 Arial,Helvetica,sans-serif!important;
  letter-spacing:.6px;
  text-align:center;
  cursor:pointer;
}

#heda-supermarket-catalog-2026 a.sc-quote:hover{
  background:var(--sc-blue-dark)!important;
  border-color:var(--sc-blue-dark)!important;
  color:#fff!important;
}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1024px){

  #heda-supermarket-catalog-2026 .sc-stage{
    padding:15px;
  }

  #heda-supermarket-catalog-2026 .sc-thumb-track{
    grid-auto-columns:104px;
  }

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  #heda-supermarket-catalog-2026 .sc-container{
    width:calc(100% - 28px);
  }

  #heda-supermarket-catalog-2026 .sc-intro{
    padding-top:10px;
  }

  #heda-supermarket-catalog-2026 .sc-intro-summary{
    align-items:flex-start;
    padding-top:13px;
  }

  #heda-supermarket-catalog-2026 .sc-intro-summary a{
    width:100%;
  }

  #heda-supermarket-catalog-2026 .sc-toolbar{
    gap:11px;
    padding:12px;
  }

  #heda-supermarket-catalog-2026 .sc-toolbar-title{
    width:100%;
    justify-content:space-between;
  }

  #heda-supermarket-catalog-2026 .sc-controls{
    width:100%;
    justify-content:space-between;
  }

  #heda-supermarket-catalog-2026 .sc-control-button{
    padding:8px 11px;
  }

  #heda-supermarket-catalog-2026 .sc-stage{
    padding:8px;
  }

  #heda-supermarket-catalog-2026 .sc-spread{
    margin-bottom:15px;
  }

  #heda-supermarket-catalog-2026 .sc-spread figcaption{
    padding:10px;
    font-size:10px;
  }

  #heda-supermarket-catalog-2026 .sc-reader-bottom{
    padding:12px;
    align-items:flex-start;
    flex-direction:column;
  }

  #heda-supermarket-catalog-2026 .sc-bottom-buttons{
    width:100%;
  }

  #heda-supermarket-catalog-2026 .sc-bottom-buttons button{
    flex:1;
  }

  #heda-supermarket-catalog-2026 .sc-thumb-track{
    grid-auto-columns:90px;
    gap:8px;
  }

  #heda-supermarket-catalog-2026 .sc-thumbnails-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  #heda-supermarket-catalog-2026 .sc-help{
    padding-bottom:27px;
  }

  #heda-supermarket-catalog-2026 .sc-related{
    padding:24px 0;
  }

  #heda-supermarket-catalog-2026 .sc-related-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  #heda-supermarket-catalog-2026 .sc-related a{
    width:100%;
  }

  #heda-supermarket-catalog-2026 .sc-cta{
    padding:37px 0;
  }

  #heda-supermarket-catalog-2026 .sc-cta-inner{
    grid-template-columns:1fr;
    gap:22px;
  }

  #heda-supermarket-catalog-2026 a.sc-quote{
    width:100%!important;
  }

}

@media(prefers-reduced-motion:reduce){

  #heda-supermarket-catalog-2026 *,
  #heda-supermarket-catalog-2026 *:before,
  #heda-supermarket-catalog-2026 *:after{
    transition:none!important;
    scroll-behavior:auto!important;
  }

}
