/* SimplyKitchenLife — small frontend additions layered on skl.css */
.alert--ok{ background:#e7f6ec; border-color:#bfe6cd; color:#0a7d33; }
.alert--err{ background:var(--brand-tint); border-color:#ffd0d8; color:var(--brand-900); }

/* ---------- Category hero (single category page) ---------- */
.cat-hero{
  display:flex; gap:clamp(16px,3vw,28px); align-items:center;
  background:var(--tint,linear-gradient(135deg,#ffe8d6,#ffd2b0));
  border-radius:var(--r-xl); padding:clamp(24px,4vw,40px);
  box-shadow:var(--sh-1);
}
.cat-hero__icon{
  flex:none; width:clamp(64px,9vw,96px); height:clamp(64px,9vw,96px);
  display:grid; place-items:center; border-radius:var(--r-lg);
  background:rgba(255,255,255,.55); color:var(--ink);
}
.cat-hero__icon svg{ width:54%; height:54%; }
.cat-hero .eyebrow{ color:var(--ink); opacity:.7; }
@media (max-width:560px){
  .cat-hero{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ---------- Search submit button (inside .search) ---------- */
.search__btn{ display:grid; place-items:center; background:none; border:0; padding:0; cursor:pointer; color:var(--text-3); flex:none; }
.search__btn svg{ width:20px; height:20px; }
.search__btn:hover{ color:var(--brand); }

/* ---------- Search results page ---------- */
.search-empty{ text-align:center; padding:48px 20px; color:var(--text-2); }
.search-empty svg{ width:46px; height:46px; opacity:.4; margin-bottom:12px; color:var(--text-3); }
.search-articles{ display:grid; gap:12px; }
.search-article{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); transition:box-shadow .15s; }
.search-article:hover{ box-shadow:var(--sh-2); }
.search-article__ic{ width:48px; height:48px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--tint,linear-gradient(150deg,#e3ece6,#cadccf)); color:var(--ink); }
.search-article__ic svg{ width:24px; height:24px; }
.search-article__txt b{ font-family:var(--font-head); display:block; }
.search-article__txt span{ font-size:.85rem; color:var(--text-2); }

/* ---------- Pages hub ---------- */
.pages-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:720px){ .pages-grid{ grid-template-columns:1fr; } }
.page-card{ display:flex; align-items:center; gap:16px; padding:20px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface); transition:box-shadow .16s, transform .16s, border-color .16s; }
.page-card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); border-color:var(--brand-tint); }
.page-card__ic{ width:50px; height:50px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-900); }
.page-card__ic svg{ width:24px; height:24px; }
.page-card__txt{ display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1; }
.page-card__txt b{ font-family:var(--font-head); font-size:1.02rem; color:var(--text); }
.page-card__txt small{ color:var(--text-3); font-size:.85rem; }
.page-card__arrow{ width:18px; height:18px; flex:none; color:var(--text-3); transition:transform .16s, color .16s; }
.page-card:hover .page-card__arrow{ transform:translateX(3px); color:var(--brand); }

/* ---------- Hero slider polish (readability + spacing) ---------- */
/* Light scrim on the left so dark text stays legible over any image */
.slide::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(95deg,
    rgba(255,250,243,.95) 0%,
    rgba(255,250,243,.78) 24%,
    rgba(255,250,243,.30) 46%,
    rgba(255,250,243,0) 62%);
}
/* keep text above the scrim and clear of the prev arrow */
.slide__inner{ z-index:2; padding-left:clamp(80px,8vw,116px); padding-right:clamp(24px,4vw,48px); }
.slide__title{ color:var(--ink); text-shadow:0 1px 0 rgba(255,250,243,.5); }
.slide__text{ color:#574e47; }
.slide__inner .eyebrow{ opacity:.85; letter-spacing:.16em; }

/* arrows: a touch more contrast, sit above the scrim */
.slider-arrow{ z-index:5; box-shadow:0 6px 18px rgba(22,17,15,.16); }
.slider-arrow--prev{ left:14px; }
.slider-arrow--next{ right:14px; }
@media (max-width:640px){
  /* on small screens hide the prev arrow so it never overlaps text */
  .slider-arrow--prev{ display:none; }
  .slide__inner{ padding-left:clamp(22px,6vw,32px); }
}

/* ---------- Category card icon (bigger, with soft chip) ---------- */
.cat-card{ min-height:148px; }
.cat-card__icon{
  width:54px; height:54px; padding:12px; box-sizing:border-box;
  background:rgba(255,255,255,.6); border-radius:15px;
  color:var(--ink); opacity:1;
  box-shadow:0 2px 10px rgba(22,17,15,.07);
}
@media (max-width:720px){
  .cat-card__icon{ width:48px; height:48px; padding:11px; }
}

/* ---------- Product images (pin card + detail gallery) ---------- */
.pin-media__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.gallery__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gallery__main{ position:relative; overflow:hidden; }

/* ---------- Product detail image thumbnails ---------- */
.gallery__thumb--img{ padding:0; overflow:hidden; position:relative; }
.gallery__thumb--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gallery__thumb--img.is-active{ outline:2.5px solid var(--brand); outline-offset:2px; }