/* HOME72 (cards #72 + #74, TheDekel 19/10 9:37–9:40 AM): home hero like the original site — smaller logo, lighter category circles
   with single-line regular-weight labels, a wider search bar with equal white space left and right — plus gentle animations
   (icons spread from the centre once per page view, a slow light sheen over the logo). transform/opacity only; no layout shift;
   prefers-reduced-motion: no motion. Additive file; remove the <link> to roll back. */

/* ---- #72.1 logo ≈ 70% of the previous size ---- */
header.home-h a.logo.big img{height:63px!important;max-height:63px!important;width:auto!important;max-width:min(78vw,360px)!important}
header.home-h a.logo.big{min-height:104px!important}
@media (max-width:600px){header.home-h a.logo.big img{height:44px!important;max-height:44px!important;max-width:58vw!important}header.home-h a.logo.big{min-height:76px!important}}

/* ---- #72.3 search: wider, symmetric white space inside ---- */
header.home-h form.search{max-width:min(720px,calc(100vw - 80px))!important;width:720px!important;padding-inline:18px!important;box-sizing:border-box!important;align-items:center}
header.home-h form.search>button[type=submit]{flex:0 0 auto;width:24px!important;min-width:0!important;padding:0!important;margin:0!important;display:inline-flex;align-items:center;justify-content:center;background:transparent!important;border:0!important}
header.home-h form.search>button[type=submit] svg{width:22px;height:22px}
header.home-h form.search .p68-sic{padding:0!important;margin:0!important;gap:12px!important}
header.home-h form.search input[type=search]{padding-inline:14px!important}
@media (max-width:760px){header.home-h form.search{width:auto!important;max-width:calc(100vw - 32px)!important;padding-inline:14px!important}header.home-h form.search input[type=search]{padding-inline:10px!important}}

/* ---- #72.2 category circles + labels like the original (thin ring, soft shadow, regular weight, one line) ---- */
header.home-h nav.home-cats{gap:30px}
header.home-h .home-cats a{font-weight:400!important;font-size:14px;color:#3f4a4d;gap:8px;letter-spacing:.01em}
header.home-h .home-cats a>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.25}
header.home-h nav.home-cats.hx-row>a{max-width:120px}
header.home-h nav.home-cats.hx-row>a>span:last-child{overflow-wrap:normal}
header.home-h .home-cats .ic{width:66px!important;height:66px!important;background:radial-gradient(circle at 50% 38%,#fbfdfd 0,#eef3f5 70%,#e6edf0 100%)!important;box-shadow:inset 0 0 0 1.5px #d9e3e6,0 2px 7px rgba(20,60,70,.10)!important}
header.home-h .home-cats .ic img{width:42px;height:42px}
header.home-h .home-cats a:hover .ic,header.home-h .home-cats a:focus-visible .ic{box-shadow:inset 0 0 0 1.5px #c4d3d7,0 4px 12px rgba(20,60,70,.16)!important;background:radial-gradient(circle at 50% 38%,#fff 0,#f1f6f7 70%,#e9f0f2 100%)!important}
header.home-h .home-cats a:focus-visible{outline:2px solid #0f6f78;outline-offset:4px;border-radius:12px}
@media (max-width:700px){
  header.home-h .home-cats a{font-size:12.5px}
  header.home-h .home-cats .ic{width:54px!important;height:54px!important}
  header.home-h .home-cats .ic img{width:34px;height:34px}
  /* phone keeps its two-line clamp (existing phone layout) */
  header.home-h nav.home-cats.hx-row>a>span:last-child{white-space:normal;text-overflow:clip}
}

/* ---- #74.3 logo light sheen: a soft diagonal band sweeps across the logo shape every ~7s (masked by the logo itself) ---- */
header.home-h a.logo.big{position:relative}
header.home-h a.logo.big .h72-sheen{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;overflow:clip;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
header.home-h a.logo.big .h72-sheen.on{visibility:visible}
header.home-h a.logo.big .h72-sheen::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%);transform:translateX(-120%) skewX(-14deg);animation:h72sheen 11s cubic-bezier(.45,.05,.35,1) 2.4s infinite;will-change:transform}
html.h72-dark-logo header.home-h a.logo.big .h72-sheen.on{visibility:visible}
header.home-h a.logo.big .h72-sheen::before{background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.18) 40%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.18) 60%,rgba(255,255,255,0) 100%)}
@keyframes h72sheen{0%{transform:translateX(-120%) skewX(-14deg)}38%{transform:translateX(300%) skewX(-14deg)}100%{transform:translateX(300%) skewX(-14deg)}}

@media (prefers-reduced-motion:reduce){
  header.home-h a.logo.big .h72-sheen{display:none!important}
}

/* ==== E74 (TheDekel 19/10 on #72/#74): calmer motion (timings in home72.js + the sheen above); category tiles like the original site:
   NO drop shadow, the light ring back (#d7dfe2, ~7% of the circle), label weight 500 colour #474747. On hover/focus (computer) the ring
   is pushed out past the circle's edge, so it thins out until it is gone, while the simcha's hover file plays (existing swap). The ring is
   a pseudo-element animated with transform only; the icon itself is not resized (P69HV locks its box on hover). Reduced motion: no transition. ==== */
header.home-h .home-cats .ic,header.home-h .home-cats a:hover .ic,header.home-h .home-cats a:focus-visible .ic{box-shadow:none!important;position:relative;overflow:hidden;isolation:isolate}
header.home-h .home-cats .ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:4.5px solid #d7dfe2;box-sizing:border-box;pointer-events:none;z-index:2;transform:scale(1);transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
@media (hover:hover) and (pointer:fine){header.home-h .home-cats a:hover .ic::after{transform:scale(1.16)}}
header.home-h .home-cats a:focus-visible .ic::after{transform:scale(1.16)}
@media (max-width:700px){header.home-h .home-cats .ic::after{border-width:3.5px}}
@font-face{font-family:'AssistantH74';font-style:normal;font-weight:500;font-display:swap;src:url(/h74/Assistant-500-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'AssistantH74';font-style:normal;font-weight:500;font-display:swap;src:url(/h74/Assistant-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* the site font ships only 400 and 700; the original's label (Inter 500) sits between them - a private 500 cut, used only here */
header.home-h .home-cats a,header.home-h .home-cats a>span:last-child{font-family:'AssistantH74','Assistant','Heebo',system-ui,sans-serif!important;font-weight:500!important;color:#474747!important}
@media (prefers-reduced-motion:reduce){header.home-h .home-cats .ic::after{transition:none!important}}

/* ==== H147 (card 147): search hint letters pop in one by one (decorative overlay from home72.js; the input keeps its real placeholder + aria-label) ==== */
header.home-h form.search>.h147{position:absolute;z-index:2;pointer-events:none;overflow:hidden;white-space:pre;text-align:start;box-sizing:border-box;transition:opacity .15s}
header.home-h form.search>.h147.off{opacity:0;visibility:hidden}
header.home-h form.search>.h147 .h147-l{display:inline}
header.home-h form.search>.h147 i{display:inline-block;font-style:normal;transform-origin:50% 85%;animation:h147in .16s cubic-bezier(.2,.8,.3,1) both;will-change:transform,opacity}
header.home-h form.search>.h147 i.f{display:inline;animation-name:h147fade}
header.home-h form.search>.h147 i.o{animation:h147out .17s cubic-bezier(.4,0,1,1) both}
header.home-h form.search>.h147 i.f.o{animation-name:h147fadeout}
header.home-h form.search input.h147-on::placeholder{color:transparent!important;opacity:0!important}
@keyframes h147in{0%{opacity:0;transform:translate3d(0,.15em,0) scale(.9)}60%{opacity:1;transform:translate3d(0,-.02em,0) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes h147out{0%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,-.3em,0) scale(.75)}}
@keyframes h147fade{from{opacity:0}to{opacity:1}}
@keyframes h147fadeout{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){header.home-h form.search>.h147{display:none!important}header.home-h form.search input.h147-on::placeholder{color:inherit!important;opacity:1!important}}

/* ==== H148 (card 148): phone "all categories" grid - (a) 3 tiles play their second (hover) file, rotating at random (home72.js cats148);
   (b) a last row that is not full is centred. The grid gets twice as many tracks and every tile spans two, so the leftover tiles can start
   half a column in. Works in RTL and LTR (centring is symmetric). 4 columns above 900px, 3 at 900px and below (same breakpoints as h87.css). ==== */
main.home>section.explore>.cgrid .ic>img.h148{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;border-radius:50%;display:block;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1}
main.home>section.explore>.cgrid .ic>img.h148.on{opacity:1}
@media (prefers-reduced-motion:reduce){main.home>section.explore>.cgrid .ic>img.h148{display:none!important}}
@media (min-width:901px){
  html body main.home>section.explore>.cgrid{grid-template-columns:repeat(8,minmax(0,1fr))!important}
  html body main.home>section.explore>.cgrid>*{grid-column:span 2}
  html body main.home>section.explore>.cgrid>:last-child:nth-child(4n+1){grid-column:4/span 2}
  html body main.home>section.explore>.cgrid>:nth-last-child(2):nth-child(4n+1){grid-column:3/span 2}
  html body main.home>section.explore>.cgrid>:nth-last-child(3):nth-child(4n+1){grid-column:2/span 2}
}
@media (max-width:900px){
  html body main.home>section.explore>.cgrid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html body main.home>section.explore>.cgrid>*{grid-column:span 2}
  html body main.home>section.explore>.cgrid>:last-child:nth-child(3n+1){grid-column:3/span 2}
  html body main.home>section.explore>.cgrid>:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
}

/* ==== H149 (card 149): thin light divider between the footer links, only between links on the same row (row starts marked by home72.js) ==== */
.foot nav.h149>a{position:relative}
.foot nav.h149>a:not(.h149-rs)::before{content:"";position:absolute;top:50%;inset-inline-start:calc(var(--h149g,26px) / -2 - .5px);width:1px;height:1.05em;transform:translateY(-50%);background:rgba(255,255,255,.38);pointer-events:none}