/* ---------- CATEGORY COVER (standalone category pages) ----------
   A wide photo banner that sits at the top of category.html and
   shop-category.html. The photo is unified with the store's look by:
   - a dark gradient shade (keeps the white title readable in light AND dark mode)
   - a soft brand-orange (#E8590C) glow in one corner
   - a slight desaturation so every photo sits in the same tonal range.
   Orange is hard-coded on purpose: in dark mode --accent turns white. */

.cat-hero.cat-hero--cover{ padding:26px 0 8px; }

.cat-cover{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:16px; min-height:290px;
  display:flex; align-items:flex-end;
  background:linear-gradient(135deg,#1b1b1b 0%,#0d0d0d 100%); /* shown while the photo loads / if it fails */
  box-shadow:0 22px 44px -26px rgba(0,0,0,.55);
}
.cat-cover-img{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.88) contrast(1.05) brightness(.96);
  opacity:0; transform:scale(1.03);
  transition:opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.cat-cover-img.is-loaded{ opacity:1; transform:scale(1); }
.cat-cover-img.is-broken{ display:none; }

/* readability shade + brand tint */
.cat-cover-shade{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(232,89,12,.30) 0%, rgba(232,89,12,0) 55%),
    linear-gradient(90deg, rgba(10,10,10,.84) 0%, rgba(10,10,10,.58) 46%, rgba(10,10,10,.16) 100%),
    linear-gradient(0deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 55%);
}
html[dir="rtl"] .cat-cover-shade{ transform:scaleX(-1); }

/* thin inner border so the banner reads as part of the card language used elsewhere */
.cat-cover::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}

.cat-cover-inner{ position:relative; width:100%; padding:30px 38px 34px; color:#fff; }
.cat-cover .cat-title{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); margin-bottom:8px; }
.cat-cover .cat-sub{ color:rgba(255,255,255,.88); max-width:580px; }
.cat-cover .cat-page-meta{ color:rgba(255,255,255,.7); }
.cat-cover .back-link,
.cat-cover .crumbs,
.cat-cover .crumbs a{ color:rgba(255,255,255,.78); }
.cat-cover .back-link:hover,
.cat-cover .crumbs a:hover{ color:#fff; }
.cat-cover .crumbs b{ color:#fff; }
.cat-cover .crumbs{ margin-bottom:auto; }
.cat-cover .back-link{ margin-bottom:34px; }
.cat-cover .crumbs{ margin-bottom:34px; }

/* short accent rule above the title */
.cat-cover .cat-title::before{
  content:""; display:block; width:46px; height:4px; border-radius:4px;
  background:#E8590C; margin-bottom:14px;
}

/* the round thumbnail on shop-category is redundant next to a full cover */
.cat-hero--cover .cat-page-icon{ display:none; }
.cat-hero--cover .cat-page-head{ display:block; margin-bottom:0; }
.cat-hero--cover .hero-notices{ margin-top:16px; }

@media (max-width:640px){
  .cat-hero.cat-hero--cover{ padding-top:16px; }
  .cat-cover{ min-height:210px; border-radius:14px; }
  .cat-cover-inner{ padding:20px 20px 22px; }
  .cat-cover .back-link, .cat-cover .crumbs{ margin-bottom:20px; font-size:12.5px; }
  .cat-cover .cat-title::before{ width:36px; height:3px; margin-bottom:10px; }
}
@media (prefers-reduced-motion:reduce){
  .cat-cover-img{ transition:none; transform:none; }
}