/* ==========================================================================
   LS Food & Pack Supplies — brand tokens
   Palette derived from the logo: bronze/gold monogram, warm cream ring,
   deep warm ink for text.
   ========================================================================== */

:root{
  color-scheme: light;

  --cream:        #FAF6EC;
  --cream-deep:   #F2EAD6;
  --ink:          #2B2118;
  --ink-soft:     #5B4F41;
  --bronze:       #B4834A;
  --bronze-dark:  #8C6636;
  --bronze-pale:  #DCC29A;
  --gold:         #E7A83C;
  --line:         #E3D6BE;
  --white:        #FFFFFF;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1180px;
  --radius: 4px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; background: #FAF6EC; }

body{
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.08; font-weight: 500; }
h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; }
h3{ font-size: 1.2rem; line-height: 1.35; }

p{ margin: 0; color: var(--ink-soft); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-dark);
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  background: var(--bronze);
}

/* ---------------------------------- Buttons ---------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover{ background: var(--bronze-dark); }

.btn-outline{
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{
  background: var(--ink);
  color: var(--cream);
}

.btn svg{ width: 16px; height: 16px; transition: transform 0.2s ease; }
.btn:hover svg{ transform: translateX(3px); }

/* ---------------------------------- Top bar ---------------------------------- */

.topbar{
  background: var(--ink);
  color: var(--bronze-pale);
  font-size: 0.82rem;
}
.topbar .container{
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bronze-pale);
  transition: color 0.2s ease;
}
.topbar a:hover{ color: var(--gold); }
.topbar svg{ width: 14px; height: 14px; }

/* ---------------------------------- Header ---------------------------------- */

header.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img{ height: 52px; width: auto; }

nav.main-nav ul{
  display: flex;
  gap: 8px;
}
nav.main-nav a{
  display: inline-block;
  padding: 10px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}
nav.main-nav a:hover{ color: var(--bronze-dark); }
nav.main-nav a.active{
  color: var(--ink);
  background: var(--cream-deep);
}

.menu-toggle{
  display: none;
  background: none;
  border: none;
  padding: 6px;
}
.menu-toggle svg{ width: 26px; height: 26px; }

@media (max-width: 860px){
  /* The drawer below is position:fixed and expects to size itself against the
     viewport. A backdrop-filter on this header would make the header the
     drawer's containing block instead, collapsing the panel to header height
     and letting the links spill over the page with no background behind them.
     The header background is already 92% opaque, so dropping the blur here
     costs nothing visually. */
  header.site-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cream);
  }

  /* Dimmed backdrop behind the open drawer. It sits inside the header so it
     shares the header's stacking context: above the page, below the panel.
     Tapping it closes the menu (handled in script.js). */
  header.site-header::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(43, 33, 24, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  header.site-header.nav-open::after{
    opacity: 1;
    pointer-events: auto;
  }

  nav.main-nav{
    position: fixed;
    inset: 0 0 0 30%;
    z-index: 60;
    background: var(--cream);
    box-shadow: -14px 0 36px rgba(43, 33, 24, 0.18);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 90px 28px 28px;
    border-left: 1px solid var(--line);
  }
  nav.main-nav.open{ transform: translateX(0); }
  nav.main-nav ul{ flex-direction: column; gap: 4px; }
  nav.main-nav a{ display: block; padding: 14px 12px; font-size: 1rem; }

  /* Keep the toggle above the open drawer, otherwise the panel covers the
     only control that closes it. */
  .menu-toggle{
    display: block;
    position: relative;
    z-index: 70;
  }
}

/* ---------------------------------- Hero ---------------------------------- */

.hero{
  position: relative;
  overflow: hidden;
  padding: 90px 0 100px;
}
.hero-mark{
  position: absolute;
  top: -70px;
  right: -60px;
  width: 460px;
  height: auto;
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 760px){
  .hero-mark{ width: 300px; top: -30px; right: -50px; }
}
.hero-inner{
  position: relative;
  max-width: 640px;
}
.hero p.lede{
  margin-top: 22px;
  font-size: 1.1rem;
  max-width: 520px;
}
.hero-ctas{
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ---------------------------------- Sections ---------------------------------- */

.page-view[hidden]{ display: none !important; }

section{ padding: 88px 0; }
.section-alt{ background: var(--cream-deep); }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------- Process strip ---------------------------------- */

.process{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.process::before{
  content: "";
  position: absolute;
  top: 30px;
  left: 6%;
  right: 6%;
  height: 1px;
  background-image: linear-gradient(to right, var(--bronze) 0 6px, transparent 6px 14px);
  background-size: 14px 1px;
  background-repeat: repeat-x;
}
.process-step{ position: relative; }
.process-num{
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--bronze);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.process-num svg{ width: 26px; height: 26px; stroke: var(--bronze-dark); }
.process-step h3{ margin-bottom: 8px; font-size: 1.02rem; }
.process-step p{ font-size: 0.92rem; }

@media (max-width: 860px){
  .process{ grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .process::before{ display: none; }
}
@media (max-width: 540px){
  .process{ grid-template-columns: 1fr; }
}

/* ---------------------------------- Cards ---------------------------------- */

.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 860px){
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr; }
}

.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(43, 33, 24, 0.08);
}
.card-icon{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.card-icon svg{ width: 22px; height: 22px; stroke: var(--bronze-dark); }
.card h3{ margin-bottom: 10px; }
.card p{ font-size: 0.94rem; }

/* Product category card */
.prod-card{
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.prod-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(43, 33, 24, 0.16);
  border-color: var(--bronze-pale);
}
.prod-photo{
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--bronze-pale);
}
.prod-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.prod-card:hover .prod-photo img{ transform: scale(1.07); }
.prod-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(28, 21, 14, 0.80) 0%,
    rgba(28, 21, 14, 0.30) 42%,
    rgba(28, 21, 14, 0) 68%);
}
.prod-card span{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 20px 20px;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.prod-card span::before{
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 12px;
  transition: width 0.3s ease;
}
.prod-card:hover span::before{ width: 46px; }

/* Partner logo marquee */
.logo-marquee{
  position: relative;
  overflow: hidden;
  padding: 12px 0;
  /* fade the edges so logos slide in/out softly */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.logo-track{
  display: flex;
  width: max-content;
  animation: logo-scroll 60s linear infinite;
}
.logo-item{
  flex: 0 0 auto;
  width: 200px;
  height: 118px;
  margin-right: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 26px;
  overflow: hidden; /* clip the white canvas of up-scaled opaque logos to the tile edge */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.logo-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(43, 33, 24, 0.12);
  border-color: var(--bronze-pale);
}
.logo-item img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Per-logo optical sizing: these source files carry extra internal whitespace,
   so scale them up to sit roughly level with hellmanns / thrakis-geyseis. */
.logo-item img[src$="ifantis.png"]{ transform: scale(1.40); }
.logo-item img[src$="alpro.png"]{ transform: scale(1.50); }
.logo-item img[src$="nounou.png"]{ transform: scale(1.18); }
.logo-item img[src$="katselis.jpg"]{ transform: scale(1.75); }
.logo-item img[src$="kallas.png"]{ transform: scale(2.40); }
.logo-item img[src$="artima.png"]{ transform: scale(0.78); }
.logo-item img[src$="delicious.png"]{ transform: scale(0.82); }
.logo-item img[src$="iris.png"]{ transform: scale(2.55); }
.logo-item img[src$="zaco.png"]{ transform: scale(1.08); }
/* margin-right on every tile makes the duplicated set exactly 50% of the track,
   so translateX(-50%) loops seamlessly */
@keyframes logo-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (max-width: 560px){
  .logo-item{ width: 158px; height: 100px; margin-right: 18px; padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .logo-track{
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    width: auto;
  }
  .logo-item{ margin-right: 0; }
  .logo-item[aria-hidden="true"]{ display: none; }
}

/* ---------------------------------- Stats ---------------------------------- */

.stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.stat{ text-align: center; }
.stat b{
  display: block;
  font-family: var(--display);
  font-size: 2.1rem;
  color: var(--bronze-dark);
  font-weight: 600;
}
.stat span{ font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 700px){
  .stats{ grid-template-columns: 1fr; gap: 26px; }
}

/* ---------------------------------- CTA banner ---------------------------------- */

.cta-banner{
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-banner h2{ color: var(--cream); max-width: 460px; }
.cta-banner .btn-primary{ background: var(--gold); color: var(--ink); }
.cta-banner .btn-primary:hover{ background: var(--bronze-pale); }

/* ---------------------------------- Page hero (inner pages) ---------------------------------- */

.page-hero{
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
}
.breadcrumb{
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 14px;
}
.breadcrumb a{ color: var(--bronze-dark); }
.breadcrumb span{ margin: 0 6px; }

/* ---------------------------------- Contact page ---------------------------------- */

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 860px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-card{
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.contact-card:last-child{ border-bottom: none; }
.contact-card .card-icon{ flex-shrink: 0; margin-bottom: 0; }
.contact-card h3{ font-size: 1rem; margin-bottom: 4px; }
.contact-card p{ font-size: 0.94rem; }

.map-wrap{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  height: 340px;
  margin-top: 32px;
  background: var(--cream-deep);
}
.map-wrap iframe{ width: 100%; height: 100%; border: 0; }

.map-actions{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.map-actions .btn{ padding: 11px 20px; font-size: 0.86rem; }

/* Custom map marker */
.ls-marker{ position: relative; }
.ls-marker-pin{
  position: absolute;
  inset: 0;
  background: var(--bronze);
  border: 3px solid var(--cream);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px rgba(43, 33, 24, 0.32);
}
.ls-marker-pin::after{
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 32%;
  height: 32%;
  background: var(--gold);
  border-radius: 50%;
}
.ls-marker-pulse{
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: rgba(180, 131, 74, 0.4);
  border-radius: 50%;
  animation: ls-pulse 2.4s ease-out infinite;
}
@keyframes ls-pulse{
  0%{ transform: scale(0.6); opacity: 0.65; }
  100%{ transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .ls-marker-pulse{ animation: none; opacity: 0.4; }
}

/* Leaflet chrome, restyled to match the brand */
.leaflet-container{
  font-family: var(--body);
  background: var(--cream-deep);
}
.leaflet-popup-content-wrapper{
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 16px 34px rgba(43, 33, 24, 0.2);
}
.leaflet-popup-content{ margin: 14px 16px; font-size: 0.88rem; line-height: 1.55; }
.leaflet-popup-content strong{ font-family: var(--display); font-size: 1rem; }
.leaflet-popup-tip{ background: var(--white); }
.leaflet-control-zoom a{
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.leaflet-control-attribution{
  background: rgba(250, 246, 236, 0.85) !important;
  font-size: 0.68rem !important;
}

.form-field{ margin-bottom: 18px; }
.form-field label{
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
  color: var(--ink);
}
.form-field input,
.form-field textarea{
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--body);
  font-size: 0.94rem;
  color: var(--ink);
}
.form-field input:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--bronze);
}
.form-field textarea{ resize: vertical; min-height: 120px; }

/* Honeypot — kept out of sight and out of the tab order, but not
   display:none, which some bots detect and skip. */
.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note{
  font-size: 0.82rem;
  margin-top: 14px;
  color: var(--ink-soft);
}
.form-status:empty{ display: none; }
.form-status.is-success{ color: var(--bronze-dark); font-weight: 600; }
.form-status.is-error{ color: #A33B2A; font-weight: 600; }

#contact-form button[disabled]{
  opacity: 0.6;
  cursor: default;
}
#contact-form button[disabled]:hover{ background: var(--ink); }
#contact-form button[disabled]:hover svg{ transform: none; }

/* ---------------------------------- Footer ---------------------------------- */

footer.site-footer{
  background: var(--ink);
  color: var(--bronze-pale);
  padding: 56px 0 26px;
}
.footer-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(220, 194, 154, 0.2);
}
.footer-top img{ height: 44px; margin-bottom: 16px; }
.footer-top p{ color: rgba(220, 194, 154, 0.75); font-size: 0.9rem; max-width: 320px; }
.footer-col h4{
  color: var(--cream);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul li{ margin-bottom: 10px; }
.footer-col a{
  color: rgba(220, 194, 154, 0.8);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer-col a:hover{ color: var(--gold); }

.footer-col .contact-list a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-col .contact-list svg{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--gold);
}

/* Slow underline reveal — footer page-navigation links only */
.footer-nav-links a{
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.footer-nav-links a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s ease;
}
.footer-nav-links a:hover::after,
.footer-nav-links a:focus-visible::after{
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce){
  .footer-nav-links a::after{ transition: none; }
}
.footer-bottom{
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(220, 194, 154, 0.55);
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 760px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ---------------------------------- Reveal animation ---------------------------------- */

.reveal{
  animation: ls-fade-up 0.35s ease both;
}
@keyframes ls-fade-up{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ animation: none; opacity: 1; transform: none; }
  html{ scroll-behavior: auto; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}