body[data-page="catalogue"]{
  background:#fff;
}

body[data-page="catalogue"] .grocery-catalogue{
  padding:28px 0 88px;
  background:
    radial-gradient(circle at 8% 10%,rgba(244,194,78,.07),transparent 16%),
    linear-gradient(180deg,#fff 0%,#fffefb 100%);
}

body[data-page="catalogue"] .grocery-catalogue-wrap{
  width:min(1280px,calc(100% - 48px))!important;
  max-width:none!important;
}

.catalogue-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,500px);
  align-items:center;
  gap:36px;
  margin-bottom:28px;
}

.catalogue-toolbar-copy h1{
  margin:7px 0 0;
  max-width:680px;
  color:#17231f;
  font:900 clamp(38px,3.7vw,54px)/.98 Manrope,sans-serif;
  letter-spacing:-.052em;
}

.catalogue-mini-label{
  display:inline-block;
  color:#d7a82e;
  font:800 10px/1 Manrope,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.catalogue-mini-label.light{
  color:#f2ce68;
}

.catalogue-search{
  width:100%;
  height:54px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border:1px solid #e7e8e3;
  border-radius:16px;
  background:#fbfbf8;
  box-shadow:0 8px 24px rgba(27,43,35,.04);
}

.catalogue-search-icon{
  color:#8c948f;
  font-size:20px;
}

.catalogue-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#26322d;
  font:600 13px/1 "DM Sans",sans-serif;
}

.catalogue-search input::placeholder{
  color:#9aa09c;
}

.grocery-promo-grid{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(330px,.88fr);
  gap:20px;
  min-height:420px;
}

.grocery-promo-main{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);
  align-items:center;
  min-height:420px;
  overflow:hidden;
  padding:42px 44px 38px;
  border-radius:18px;
  background:#dff0f7;
  text-decoration:none;
  color:inherit;
}

.grocery-promo-main:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.16),transparent 42%),
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.8),transparent 26%);
  pointer-events:none;
}

.grocery-promo-copy{
  position:relative;
  z-index:2;
  max-width:540px;
}

.grocery-offer{
  display:inline-block;
  margin-bottom:16px;
  color:#d7a82e;
  font:800 14px/1.2 "DM Sans",sans-serif;
}

.grocery-promo-copy h2{
  margin:0;
  max-width:470px;
  color:#17231f;
  font:900 clamp(38px,3.6vw,56px)/.98 Manrope,sans-serif;
  letter-spacing:-.055em;
}

.grocery-promo-copy p{
  margin:18px 0 0;
  max-width:440px;
  color:#6d7772;
  font:600 14px/1.65 "DM Sans",sans-serif;
}

.grocery-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
  padding:13px 18px;
  border:1px solid #27352e;
  color:#27352e;
  font:800 11px/1 Manrope,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:.2s ease;
}

.grocery-promo-main:hover .grocery-cta{
  background:#27352e;
  color:#fff;
}

.grocery-promo-media{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  min-height:300px;
}

.grocery-promo-media img{
  position:relative;
  z-index:2;
  width:min(330px,96%);
  max-height:330px;
  object-fit:contain;
  border-radius:14px;
  filter:drop-shadow(0 22px 24px rgba(63,83,74,.16));
  transition:transform .35s ease;
}

.grocery-promo-main:hover .grocery-promo-media img{
  transform:translateY(-6px) rotate(-2deg) scale(1.02);
}

.grocery-promo-blob{
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background:rgba(255,255,255,.48);
}

.grocery-promo-dots{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:22px;
  display:flex;
  gap:6px;
  transform:translateX(-50%);
}

.grocery-promo-dots i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.75);
}

.grocery-promo-dots i.active{
  background:#e5b735;
}

.grocery-promo-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:20px;
}

.grocery-mini-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(145px,170px);
  align-items:center;
  min-height:200px;
  overflow:hidden;
  padding:26px 26px;
  border-radius:18px;
  text-decoration:none;
  color:inherit;
}

.grocery-mini-card.green{
  background:#e9f1df;
}

.grocery-mini-card.pink{
  background:#f8e8e4;
}

.grocery-mini-card:before{
  content:"";
  position:absolute;
  right:-55px;
  bottom:-75px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(255,255,255,.36);
}

.grocery-mini-copy{
  position:relative;
  z-index:2;
}

.grocery-discount{
  display:inline-block;
  margin-bottom:11px;
  color:#39463f;
  font:700 15px/1 "DM Sans",sans-serif;
}

.grocery-mini-copy h3{
  margin:0;
  color:#202b26;
  font:900 clamp(25px,2.15vw,34px)/1.02 Manrope,sans-serif;
  letter-spacing:-.04em;
}

.grocery-mini-copy small{
  display:block;
  margin-top:16px;
  color:#78817d;
  font:700 10px/1.2 "DM Sans",sans-serif;
}

.grocery-mini-card img{
  position:relative;
  z-index:2;
  width:100%;
  height:150px;
  object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(50,63,57,.16));
  transition:transform .3s ease;
}

.grocery-mini-card:hover img{
  transform:translateY(-5px) scale(1.04);
}

.grocery-category-section{
  padding:42px 0 0;
}

.grocery-category-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.grocery-category-head h2{
  margin:5px 0 0;
  color:#26302c;
  font:900 28px/1 Manrope,sans-serif;
  letter-spacing:-.035em;
}

.grocery-view-all{
  border:0;
  background:transparent;
  color:#78817d;
  font:800 11px/1 Manrope,sans-serif;
  cursor:pointer;
}

.grocery-view-all span{
  margin-left:7px;
}

.grocery-category-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:178px;
  gap:10px;
  overflow-x:auto;
  padding:2px 1px 12px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}

.grocery-category-card{
  min-height:228px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 12px 18px;
  border:1px solid #f0eee7;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 22px rgba(29,44,36,.035);
  text-align:center;
  text-decoration:none;
  color:inherit;
  scroll-snap-align:start;
  transition:.22s ease;
}

.grocery-category-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(29,44,36,.08);
}

.grocery-category-image{
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#faf9f4;
}

.grocery-category-image img{
  width:132px;
  height:132px;
  object-fit:contain;
  object-position:center;
}

.grocery-category-card strong{
  color:#303a35;
  font:800 13px/1.2 Manrope,sans-serif;
}

.grocery-category-card small{
  display:none;
}

.grocery-all-ranges{
  scroll-margin-top:100px;
  padding:74px 0 0;
}

.grocery-all-ranges-head{
  max-width:760px;
  margin-bottom:28px;
}

.grocery-all-ranges-head h2{
  margin:7px 0 10px;
  color:#17231f;
  font:900 clamp(32px,4vw,50px)/1.02 Manrope,sans-serif;
  letter-spacing:-.05em;
}

.grocery-all-ranges-head p{
  margin:0;
  max-width:650px;
  color:#77817c;
  font:600 14px/1.65 "DM Sans",sans-serif;
}

.grocery-range-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.grocery-range-tile{
  position:relative;
  min-height:430px;
  overflow:hidden;
  display:grid;
  grid-template-rows:285px auto;
  border:1px solid #efeee8;
  border-radius:12px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition:.24s ease;
}

.grocery-range-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(28,42,35,.08);
}

.grocery-range-number{
  position:absolute;
  z-index:3;
  top:14px;
  left:14px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#fff;
  color:#6d7772;
  font:900 9px/1 Manrope,sans-serif;
  box-shadow:0 6px 18px rgba(28,42,35,.08);
}

.grocery-range-image{
  display:grid;
  place-items:center;
  min-height:285px;
  padding:10px;
  background:#f8f7f2;
  overflow:hidden;
}

.grocery-range-image img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:265px;
  object-fit:contain;
  object-position:center;
  transition:transform .28s ease;
}

.grocery-range-tile:hover .grocery-range-image img{
  transform:scale(1.04);
}

.grocery-range-copy{
  padding:18px 18px 19px;
}

.grocery-range-copy h3{
  margin:0;
  color:#27332d;
  font:900 20px/1.1 Manrope,sans-serif;
  letter-spacing:-.025em;
}

.grocery-range-copy p{
  margin:9px 0 14px;
  color:#7c8580;
  font:600 12px/1.5 "DM Sans",sans-serif;
}

.grocery-range-copy span{
  color:#d1a12a;
  font:800 10px/1 Manrope,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.grocery-help{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:72px;
  padding:40px 42px;
  border-radius:14px;
  background:#172c27;
  color:#fff;
}

.grocery-help h2{
  margin:7px 0 8px;
  font:900 clamp(28px,3.2vw,42px)/1.04 Manrope,sans-serif;
  letter-spacing:-.04em;
}

.grocery-help p{
  margin:0;
  color:rgba(255,255,255,.68);
  font:600 13px/1.6 "DM Sans",sans-serif;
}

.grocery-help>a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:4px;
  background:#fff;
  color:#1c2c26;
  text-decoration:none;
  font:800 11px/1 Manrope,sans-serif;
}

.is-search-hidden{
  display:none!important;
}

@media(max-width:1050px){
  .grocery-promo-grid{
    grid-template-columns:1fr;
  }

  .grocery-promo-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
  }

  .grocery-range-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  body[data-page="catalogue"] .grocery-catalogue{
    padding-top:22px;
  }

  body[data-page="catalogue"] .grocery-catalogue-wrap{
    width:min(100% - 22px,1320px)!important;
  }

  .catalogue-toolbar{
    grid-template-columns:1fr;
    gap:18px;
  }

  .grocery-promo-main{
    grid-template-columns:1fr;
    min-height:600px;
    padding:34px 26px 28px;
  }

  .grocery-promo-copy h2{
    font-size:44px;
  }

  .grocery-promo-media{
    min-height:250px;
  }

  .grocery-promo-media img{
    max-height:260px;
  }

  .grocery-promo-side{
    grid-template-columns:1fr;
  }

  .grocery-mini-card{
    min-height:210px;
  }

  .grocery-range-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grocery-help{
    align-items:flex-start;
    flex-direction:column;
    padding:32px 26px;
  }
}

@media(max-width:520px){
  .catalogue-toolbar-copy h1{
    font-size:36px;
  }

  .grocery-promo-main{
    min-height:520px;
  }

  .grocery-promo-copy h2{
    font-size:38px;
  }

  .grocery-mini-card{
    grid-template-columns:1fr 120px;
    padding:24px 20px;
  }

  .grocery-mini-card img{
    height:135px;
  }

  .grocery-category-strip{
    grid-auto-columns:152px;
  }

  .grocery-category-card{
    min-height:198px;
  }

  .grocery-category-image{
    width:118px;
    height:118px;
  }

  .grocery-category-image img{
    width:110px;
    height:110px;
  }

  .grocery-range-grid{
    grid-template-columns:1fr;
  }

  .grocery-range-tile{
    grid-template-columns:1fr;
    grid-template-rows:250px auto;
    min-height:390px;
  }

  .grocery-range-image{
    min-height:250px;
    padding:8px;
  }

  .grocery-range-image img{
    max-height:234px;
  }

  .grocery-range-copy{
    align-self:center;
  }
}

/* 2026-10-02: image-sized catalogue range tiles */
body[data-page="catalogue"] .grocery-range-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
body[data-page="catalogue"] .grocery-range-tile{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  border-radius:18px!important;
  border:1px solid #ecebe5!important;
  background:#f7f6f1!important;
  box-shadow:0 12px 30px rgba(28,42,35,.06)!important;
}
body[data-page="catalogue"] .grocery-range-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  display:block!important;
  background:#f7f6f1!important;
}
body[data-page="catalogue"] .grocery-range-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
}
body[data-page="catalogue"] .grocery-range-tile:hover .grocery-range-image img{
  transform:scale(1.015)!important;
}
body[data-page="catalogue"] .grocery-range-copy{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:4!important;
  padding:46px 18px 17px!important;
  background:linear-gradient(180deg,rgba(12,25,20,0) 0%,rgba(15,29,24,.82) 48%,rgba(15,29,24,.96) 100%)!important;
}
body[data-page="catalogue"] .grocery-range-copy h3{
  margin:0!important;
  color:#fff!important;
  font:900 clamp(20px,1.8vw,27px)/1.05 Manrope,sans-serif!important;
  letter-spacing:-.035em!important;
}
body[data-page="catalogue"] .grocery-range-copy p{
  display:none!important;
}
body[data-page="catalogue"] .grocery-range-copy span{
  display:inline-flex!important;
  align-items:center!important;
  margin-top:9px!important;
  padding:8px 11px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  color:#172c27!important;
  font:900 9px/1 Manrope,sans-serif!important;
  letter-spacing:.04em!important;
}
body[data-page="catalogue"] .grocery-range-number{
  top:14px!important;
  left:14px!important;
  width:36px!important;
  height:36px!important;
  z-index:6!important;
}
@media(max-width:1050px){
  body[data-page="catalogue"] .grocery-range-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:560px){
  body[data-page="catalogue"] .grocery-range-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body[data-page="catalogue"] .grocery-range-tile{
    aspect-ratio:1/1!important;
    border-radius:16px!important;
  }
  body[data-page="catalogue"] .grocery-range-copy{
    padding:40px 15px 14px!important;
  }
  body[data-page="catalogue"] .grocery-range-copy h3{
    font-size:22px!important;
  }
}


/* 2026-10-02 DESKTOP ONLY no-crop catalogue tiles */
@media(min-width:701px){
  body[data-page="catalogue"] .grocery-range-tile{
    background:#f4f5f0!important;
  }
  body[data-page="catalogue"] .grocery-range-image{
    padding:10px!important;
    background:#f4f5f0!important;
  }
  body[data-page="catalogue"] .grocery-range-image img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
  body[data-page="catalogue"] .grocery-range-tile:hover .grocery-range-image img{
    transform:none!important;
  }
}


/* 2026-10-02 FINAL desktop catalogue full-width 3-column grid */
@media(min-width:1101px){
  body[data-page="catalogue"] .grocery-catalogue-wrap{
    width:calc(100% - 40px)!important;
    max-width:1600px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body[data-page="catalogue"] .grocery-range-grid{
    display:grid!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    justify-content:stretch!important;
    align-items:start!important;
  }
  body[data-page="catalogue"] .grocery-range-tile{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    justify-self:stretch!important;
    aspect-ratio:1/1!important;
  }
  body[data-page="catalogue"] .grocery-range-copy{
    padding:42px 15px 14px!important;
  }
  body[data-page="catalogue"] .grocery-range-copy h3{
    font-size:clamp(18px,1.45vw,22px)!important;
  }
}


/* 2026-10-03 Sugar catalogue subcategories */
.sugar-subtypes,.sugar-range-types{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.sugar-subtypes i,.sugar-range-types i{display:inline-flex;align-items:center;padding:5px 7px;border-radius:999px;background:#f4ead8;color:#765523;font:800 7px/1 Manrope,sans-serif;font-style:normal;letter-spacing:.03em;text-transform:uppercase}
.grocery-range-copy .sugar-range-types{margin:8px 0 2px}
@media(max-width:700px){
  .sugar-subtypes i,.sugar-range-types i{font-size:6px;padding:4px 6px}
}


/* 2026-10-05 Wines catalogue subcategories */
.wine-subtypes,.wine-range-types{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.wine-subtypes i,.wine-range-types i{display:inline-flex;align-items:center;padding:5px 7px;border-radius:999px;background:#efe7e7;color:#6b2e38;font:800 7px/1 Manrope,sans-serif;font-style:normal;letter-spacing:.03em;text-transform:uppercase}
.grocery-range-copy .wine-range-types{margin:8px 0 2px}
@media(max-width:700px){
  .wine-subtypes i,.wine-range-types i{font-size:6px;padding:4px 6px}
}

/* 2026-10-17: align category thumbnails across cards with/without subtype chips.
   Sugar and Wines have extra labels, which previously shifted their images upward
   because the complete content stack was vertically centered. */
body[data-page="catalogue"] .grocery-category-card{
  justify-content:flex-start;
  padding-top:42px;
}
body[data-page="catalogue"] .grocery-category-image{
  flex-shrink:0;
}
@media(max-width:700px){
  body[data-page="catalogue"] .grocery-category-card{
    padding-top:16px;
  }
}

/* 2026-10-17: matching small subtype chips for all other catalogue categories. */
body[data-page="catalogue"] .catalogue-subtypes,
body[data-page="catalogue"] .catalogue-range-types{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  margin-top:8px;
}
body[data-page="catalogue"] .catalogue-subtypes i,
body[data-page="catalogue"] .catalogue-range-types i{
  display:inline-flex;
  align-items:center;
  padding:5px 7px;
  border-radius:999px;
  background:#edf0f4;
  color:#42536b;
  font:800 7px/1 Manrope,sans-serif;
  font-style:normal;
  letter-spacing:.03em;
  text-transform:uppercase;
}
body[data-page="catalogue"] .grocery-range-copy .catalogue-range-types{
  justify-content:flex-start;
  margin:8px 0 2px;
}
@media(max-width:700px){
  body[data-page="catalogue"] .catalogue-subtypes i,
  body[data-page="catalogue"] .catalogue-range-types i{
    font-size:6px;
    padding:4px 6px;
  }
}