:root{
  --nexpflipbox-ink:#3f533f;
  --nexpflipbox-primary: var(--e-global-color-primary, #3f533f);
  --nexpflipbox-back:#f3ead8;
  --nexpflipbox-border:rgba(63,83,63,.18);
  --nexpflipbox-shadow:0 16px 26px rgba(0,0,0,.10);
  --nexpflipbox-radius:22px;
}

/* ============================
   Archive layout
   ============================ */

.nexpflipbox-archive{
  width:100%;
  position:relative;
  z-index:1;
  /* Dynamic clearance when a theme footer is fixed/sticky */
  padding-bottom: calc(var(--nexpflipbox-footer-clearance, 0px) + env(safe-area-inset-bottom));
}

.nexpflipbox-controls{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.nexpflipbox-search{ position:relative; flex:0 1 300px; max-width:300px; }

.nexpflipbox-search-input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--nexpflipbox-border);
  border-radius:12px !important;
  background:#fff;
  color:var(--nexpflipbox-ink);
}

.nexpflipbox-search-input::placeholder{ color:rgba(63,83,63,.55); }

.nexpflipbox-filter{ position:relative; flex:0 0 280px; }

.nexpflipbox-filter-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--nexpflipbox-border);
  background:#fff !important;
  border-radius:12px;
  cursor:pointer;
  color:var(--nexpflipbox-ink);
}

.nexpflipbox-filter-btn:hover,
.nexpflipbox-filter-btn:focus{
  border-color:var(--nexpflipbox-primary);
}

.nexpflipbox-filter-label{ color:var(--nexpflipbox-ink); }
.nexpflipbox-caret{ color:var(--nexpflipbox-ink); }

.nexpflipbox-filter-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:100%;
  border:1px solid var(--nexpflipbox-border);
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  max-height:520px;
  overflow:auto;
  z-index:30;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}

.nexpflipbox-product-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.nexpflipbox-product-list label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.25;
  color:var(--nexpflipbox-ink);
}

.nexpflipbox-muted{ margin:0; opacity:.75; font-size:14px; color:var(--nexpflipbox-ink); }

.nexpflipbox-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-bottom:40px;
}

@media (max-width: 1024px){
  .nexpflipbox-controls{ justify-content:flex-end; }
  .nexpflipbox-search{ flex:1 1 520px; max-width:520px; }
  .nexpflipbox-filter{ flex:1 1 520px; max-width:520px; }
  .nexpflipbox-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px){
  .nexpflipbox-controls{ gap:10px; }
  .nexpflipbox-search{ flex:0 0 calc(50% - 6px); max-width:none; }
  .nexpflipbox-filter{ flex:0 0 calc(50% - 6px); max-width:none; }
  .nexpflipbox-grid{ grid-template-columns:1fr; }
}

/* Suggestions */
.nexpflipbox-suggest{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  border:1px solid var(--nexpflipbox-border);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  z-index:40;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}

.nexpflipbox-suggest-item{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:10px 12px;
  cursor:pointer;
  font-size:14px;
  color:var(--nexpflipbox-ink);
}

.nexpflipbox-suggest-item:hover,
.nexpflipbox-suggest-item:focus{ background:rgba(63,83,63,.08); color:var(--nexpflipbox-primary); }

/* Load more */
.nexpflipbox-loadmore-wrap{ margin-top:18px; }
.nexpflipbox-loadmore{
  border:1px solid var(--nexpflipbox-border);
  background:#fff;
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  color:var(--nexpflipbox-ink);
}

.nexpflipbox-archive.is-loading .nexpflipbox-loadmore{ opacity:.6; cursor:progress; }

/* ============================
   Flip card
   ============================ */

.nexpflipbox-perspective{ perspective:1000px; }

.nexpflipbox-ingredient-card{
  width:100%;
  filter: drop-shadow(var(--nexpflipbox-shadow));
}

.nexpflipbox-ingredient-card__inner{
  position:relative;
  width:100%;
  padding-bottom:120%;
  transform-style:preserve-3d;
  transition: transform 450ms ease;
}

.nexpflipbox-ingredient-card__inner.is-flipped{ transform: rotateY(180deg); }

.nexpflipbox-ingredient-card__front,
.nexpflipbox-ingredient-card__back{
  position:absolute;
  inset:0;
  border-radius:var(--nexpflipbox-radius);
  overflow:hidden;
  backface-visibility:hidden;
}

.nexpflipbox-ingredient-card__front{ background:#fff; }
.nexpflipbox-ingredient-card__back{ background:var(--nexpflipbox-back); transform: rotateY(180deg); }

.nexpflipbox-card-face{
  position:relative;
  width:100%;
  height:100%;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  color:var(--nexpflipbox-ink);
}

/* Front card uses the ingredient image as a CSS background (no <img> / extra tags) */
.nexpflipbox-card-face--front{
  background-repeat:no-repeat !important;
  background-position:center center !important;
  /* Reserve a corner box similar to the reference design */
  background-size: cover !important;
}

.nexpflipbox-card-face--back{ padding-bottom:64px; }

.nexpflipbox-card-face__content{
  flex:1 1 auto;
  min-height:0;
  padding-bottom:86px; /* space for corner image + button */
}

.nexpflipbox-card-title{
  margin:0;
  font-size:34px;
  line-height:1.05;
  font-weight:500;
  letter-spacing:.2px;
}

.nexpflipbox-card-text{
  margin-top:16px;
  font-size:15px;
  line-height:1.55;
  color:rgba(63,83,63,.92);
}

/* Meta grid (back) */
.nexpflipbox-meta-grid{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px 18px;
  font-size:15px;
  margin-top:18px;
}

.nexpflipbox-meta-label{ font-weight:600; color:var(--nexpflipbox-ink); }
.nexpflipbox-meta-value{ color:rgba(63,83,63,.92); }

.nexpflipbox-link{
  color:var(--nexpflipbox-ink);
  text-decoration:underline;
}

.nexpflipbox-link:hover{ color:var(--nexpflipbox-primary); opacity:1; }

.nexpflipbox-back-footer{
  position:absolute;
  left:22px;
  bottom:18px;
  z-index:5;
}

/* (Intentionally no image on the back side) */

/* Floating action buttons */
.nexpflipbox-fab{
  appearance:none;
  -webkit-appearance:none;
  padding:0 !important;
  position:absolute;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  border-radius:9999px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:6;
  border:1px solid rgba(63,83,63,.22);
  background:#fff;
  color:var(--nexpflipbox-ink);
}

.nexpflipbox-fab:hover{ border-color:var(--nexpflipbox-primary); }

.nexpflipbox-ingredient-card__back .nexpflipbox-fab{
  background:var(--nexpflipbox-ink);
  color:#fff;
  border-color:var(--nexpflipbox-ink);
}

.nexpflipbox-fab__icon{
  font-size:22px;
  line-height:1;
  transform: translateY(-1px);
}

/* Accessibility helper */
.screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  border:0;
}

/* Stronger filter button text colors (theme-proof) */
.nexpflipbox-filter .nexpflipbox-filter-btn,
.nexpflipbox-filter .nexpflipbox-filter-btn *{
  color:var(--nexpflipbox-ink) !important;
}
.nexpflipbox-filter .nexpflipbox-filter-btn:hover,
.nexpflipbox-filter .nexpflipbox-filter-btn:focus{
  border-color:var(--nexpflipbox-primary);
}

/* Clear filters button */
.nexpflipbox-clear-btn{
  display:none;
  align-self:stretch;
  height:46px;
  padding:0 16px;
  border:1px solid var(--nexpflipbox-border);
  background:#fff;
  border-radius:12px;
  cursor:pointer;
  color:var(--nexpflipbox-ink);
  white-space:nowrap;
}
.nexpflipbox-archive.has-active .nexpflipbox-clear-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nexpflipbox-clear-btn:hover,
.nexpflipbox-clear-btn:focus{
  border-color:var(--nexpflipbox-primary);
  color:var(--nexpflipbox-primary);
}
@media (max-width:1024px){
  .nexpflipbox-clear-btn{ width:100%; }
}

@media (max-width: 767px){
  .nexpflipbox-archive.has-active .nexpflipbox-clear-btn{
    flex:0 0 100%;
    width:100%;
  }
}