/* A photo header for every category page, built like the Clothes page header.
   The photo comes from category-hero JS (Zeina's choice from the POS, else a placeholder). */
.cat-hero{position:relative;isolation:isolate;min-height:440px;display:flex;align-items:center;background:#5d4f46;overflow:hidden}
.cat-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--cat-hero-img,none) center 24%/cover no-repeat;opacity:0;transition:opacity .6s var(--ease,ease)}
.cat-hero.is-lit:before{opacity:1}
.cat-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(30,25,20,.74),rgba(30,25,20,.38) 50%,rgba(30,25,20,.08))}
[dir="rtl"] .cat-hero:after{background:linear-gradient(270deg,rgba(30,25,20,.74),rgba(30,25,20,.38) 50%,rgba(30,25,20,.08))}
.cat-hero .hero-copy{width:100%;padding-block:64px}
.cat-hero .sec-head{max-width:560px;margin:0;color:#fff}
.cat-hero .k,.cat-hero .disp,.cat-hero .sec-head p{color:#fff}
.cat-hero .disp{margin:10px 0 18px;font-size:clamp(46px,6vw,76px)}
.cat-hero .sec-head p{font-size:17px;line-height:1.7;max-width:44ch;text-shadow:0 1px 8px #0004}
@media(max-width:600px){
  .cat-hero{min-height:460px;align-items:flex-end}
  .cat-hero:before{background-position:center 22%}
  .cat-hero:after,[dir="rtl"] .cat-hero:after{background:linear-gradient(0deg,rgba(30,25,20,.84),rgba(30,25,20,.4) 50%,rgba(30,25,20,.04) 82%)}
  .cat-hero .hero-copy{padding-block:32px}
  .cat-hero .sec-head{max-width:390px}
  .cat-hero .sec-head p{font-size:15px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){.cat-hero:before{transition:none}}
/* Computers: a tall product photo stretched full-width shows only a band of it, so the photo
   takes one side beside the title instead, aimed at the product (--cat-hero-pos from the script). */
@media(min-width:900px){
  .cat-hero{min-height:480px}
  .cat-hero:before{inset:0 0 0 44%;background-position:var(--cat-hero-pos,center 35%)}
  [dir="rtl"] .cat-hero:before{inset:0 44% 0 0}
  .cat-hero:after{background:linear-gradient(90deg,#5d4f46 0,#5d4f46 44%,rgba(93,79,70,.35) 52%,rgba(93,79,70,0) 64%)}
  [dir="rtl"] .cat-hero:after{background:linear-gradient(270deg,#5d4f46 0,#5d4f46 44%,rgba(93,79,70,.35) 52%,rgba(93,79,70,0) 64%)}
  .cat-hero .sec-head{max-width:min(520px,38vw)}
}