/* Design bridge (redesign 3.11.2026): the current page templates keep their markup and text; their colour and font tokens
   take the designer's palette (cream ground, dark ink, gold) and Heebo, so the content area matches the new shell.
   Loaded after every other stylesheet. Visual only: no content, no display:none on content. */
:root{
  --bg:#FBF8F2; --bg-2:#F1ECE3; --surface:#FFFFFF; --surface-2:#F6F1E8;
  --ink:#1C1712; --ink-2:#4A4136; --muted:#7A6E5C;
  --gold:#9C7433; --gold-2:#B98F45; --gold-deep:#78571f; /* gold-deep stays the accessible text gold of the current theme (IS 5568 contrast) */
  --accent:#9C7433; --accent-soft:#F3E2B6;
  --sans:"Heebo",system-ui,sans-serif; --body:"Heebo",system-ui,sans-serif; --serif:"Heebo",system-ui,sans-serif;
}
body.jm-theme:not(.jm-home){background:#FBF8F2;color:#1C1712}
body.jm-theme{font-family:"Heebo",system-ui,sans-serif}
body.jm-theme .serif{font-family:"Heebo",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}
/* header: the designer's dark bar on every page (his product/brand/kit pages use #14110C) */
body.jm-theme:not(.jm-home) .hx-hdr{background:#14110C}

/* ===== dark hero bands, as in the designer's product / category / brand pages (#14110C, gold accents) ===== */
body.jm-theme{overflow-x:clip}
/* product page: breadcrumbs + gallery + summary sit on the dark band; the lead form stays a light card */
body.jm-theme .jmsb-pdp{background:#FBF8F2;padding-top:0}
body.jm-theme .jmsb-pdp > .wrap:first-child{background:radial-gradient(120% 90% at 70% 0%,#2A2117 0%,#14110C 60%);box-shadow:0 0 0 100vmax #14110C;clip-path:inset(0 -100vmax);color:#FBF8F2;padding-top:clamp(18px,3vw,36px);background-color:#14110C}
body.jm-theme .jmsb-pdp .pdp-crumbs,body.jm-theme .jmsb-pdp .pdp-crumbs a{color:rgba(251,248,242,.62)}
body.jm-theme .jmsb-pdp .pdp-crumbs a:hover{color:#E6CF9A}
body.jm-theme .jmsb-pdp .pdp-title{color:#FBF8F2}
body.jm-theme .jmsb-pdp .pdp-short{color:rgba(251,248,242,.78)}
body.jm-theme .jmsb-pdp .pdp-short strong,body.jm-theme .jmsb-pdp .pdp-short b{color:#E6CF9A!important}
body.jm-theme .jmsb-pdp .pdp-promo{color:#E6CF9A}
body.jm-theme .jmsb-pdp .pdp-trust li{color:rgba(251,248,242,.78)}
body.jm-theme .jmsb-pdp .pdp-trust .gold-ic{color:#E6CF9A}
body.jm-theme .jmsb-pdp .pdp-btn-line{color:#FBF8F2;border-color:rgba(230,207,154,.35)}
body.jm-theme .jmsb-pdp .pdp-btn-line:hover{color:#E6CF9A;border-color:#E6CF9A}
body.jm-theme .jmsb-pdp .pdp-lead{background:linear-gradient(180deg,#FFFDF8,#F6EEDD);border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
body.jm-theme .jmsb-pdp .pdp-answer-first,body.jm-theme .jmsb-pdp .pdp-answer-first *{color:rgba(251,248,242,.82)}
body.jm-theme .jmsb-pdp .pdp-answer-first a,body.jm-theme .jmsb-pdp .pdp-morecat a{color:#E6CF9A}
body.jm-theme .jmsb-pdp .pdp-gal-main{background:#1C1712;border-color:rgba(230,207,154,.18)}
body.jm-theme .jmsb-pdp .pdp-gal-th{background:#1C1712;border-color:rgba(230,207,154,.22)}
body.jm-theme .jmsb-pdp .pdp-gal-th.on{border-color:#E6CF9A}
body.jm-theme .jmsb-pdp .pdp-video-cap{color:#E6CF9A}
body.jm-theme .jmsb-pdp .pdp-brandlogo{filter:brightness(0) invert(.92) sepia(.25)}
/* category / brand archives: the hero is the dark band */
body.jm-theme .jmsb-arch .arch-hero{background:radial-gradient(120% 100% at 50% 0%,#2A2117 0%,#14110C 62%);color:#FBF8F2}
body.jm-theme .jmsb-arch .arch-wordmark{color:#E6CF9A}
body.jm-theme .jmsb-arch .arch-hero .eyebrow{color:#C9A35E}
body.jm-theme .jmsb-arch .arch-title{color:#FBF8F2}
body.jm-theme .jmsb-arch .arch-desc{color:rgba(251,248,242,.74)}
body.jm-theme .jmsb-arch .arch-count{color:#E6CF9A;border-color:rgba(230,207,154,.35);background:rgba(230,207,154,.06)}
body.jm-theme .jmsb-arch .arch-logo{filter:brightness(0) invert(.92) sepia(.25)}
body.jm-theme .jmsb-arch .arch-cta{background:radial-gradient(120% 120% at 50% 0%,#2A2117 0%,#14110C 70%)}
/* sale price (only on today's sale models) */
body.jm-theme .jmsb-pdp .pdp-saleprice{margin:4px 0 2px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;color:#FBF8F2}
body.jm-theme .jmsb-pdp .pdp-saleprice b{font-size:2rem;font-weight:800;color:#F3DFA9;line-height:1}
body.jm-theme .jmsb-pdp .pdp-saleprice small{flex-basis:100%;color:rgba(251,248,242,.7);font-size:.85rem}
body.jm-theme .jmsb-pdp .pdp-saleprice .jm-terms{color:#E6CF9A;font-size:.85rem;text-decoration:underline}
/* every .arch-hero (categories, hubs, guides, city/space pages): light text on the dark band, readable contrast */
body.jm-theme .arch-hero{color:rgba(251,248,242,.82)}
body.jm-theme .arch-hero p,body.jm-theme .arch-hero li,body.jm-theme .arch-hero span:not(.foil):not(.ar),body.jm-theme .arch-hero .sp-intro,body.jm-theme .arch-hero .sp-nap{color:rgba(251,248,242,.8)}
body.jm-theme .arch-hero h1,body.jm-theme .arch-hero .arch-title{color:#FBF8F2}
body.jm-theme .arch-hero .eyebrow,body.jm-theme .arch-hero .sp-chip{color:#C9A35E}
body.jm-theme .arch-hero a:not(.pdp-btn){color:#E6CF9A}
body.jm-theme .arch-hero nav,body.jm-theme .arch-hero nav a,body.jm-theme .arch-hero .sp-crumbs,body.jm-theme .arch-hero .sp-crumbs a{color:rgba(251,248,242,.62)}
body.jm-theme .arch-hero .pdp-btn-line{color:#FBF8F2;border-color:rgba(230,207,154,.4);background:transparent}
body.jm-theme .arch-hero .pdp-btn-line .gold-ic,body.jm-theme .arch-hero .sp-tel .gold-ic{color:#E6CF9A}
body.jm-theme .arch-hero .sp-chip{border-color:rgba(230,207,154,.35);background:rgba(230,207,154,.06)}
/* homepage (accessibility, IS 5568): the hero text sits on a photo; give the hero a dark ground under the photo and the
   header a faint dark veil, so the contrast is real even before/without the image. Looks the same with the image loaded. */
body.jm-home .hx-hero{background-color:#14110C}
body.jm-home .hx-hdr{background-image:linear-gradient(rgba(14,11,8,.35),rgba(14,11,8,.35))}
/* the waitlist and spaces bands are dark (their art layers are absolutely positioned); the same dark as the band's own ground
   on the section itself, so assistive contrast checks see what visitors see */
body.jm-home #alert,body.jm-home .sx-sp{background-color:#14110C}
body.jm-home .bl-cv-b{background-image:linear-gradient(0deg,rgba(26,21,15,.92) 55%,rgba(26,21,15,0))}
/* homepage texts the design drew below the 4.5:1 contrast IS 5568 requires (decorative numbers, small meta lines): same hue, readable */
body.jm-home .ak-nh span,body.jm-home .ak-nh b{color:#ADA79C}
body.jm-home .sx-rn{color:#9C968B}
body.jm-home .bl-issue,body.jm-home .bl-it-n,body.jm-home .bl-it-k,body.jm-home .bl-it time,body.jm-home .bl-it p{color:#6F6758}
body.jm-home .ak-note.n2{opacity:.92}
body.jm-home .bl-fade{opacity:1 !important}

/* ===== smoothness (owner 3.11: mega menu and homepage felt shaky/laggy). Same look, less GPU work: =====
   1. no live blur behind panels that are already almost opaque (the blur is invisible there, but it is recomputed on every frame
      of scrolling, of the menu animation and of every animation underneath) */
.hx-mega{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#130F0B!important}
.hx-spanel,.mbar,.mp-snav,.mp-dock-in{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mbar{background:rgba(16,13,9,.96)!important}
body.jm-theme:not(.jm-home) .hx-hdr{-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:760px){.hx-hdr{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(14,11,8,.96)}}
/* 2. the homepage's floating notification cards animate forever: a blur under a moving element is re-rendered on every frame */
.ak-note{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(28,23,17,.92)!important}
/* 3. the menu opens a little quicker and settles sooner (same motion, shorter) */
.hx-nav>li:hover .hx-mega,.hx-nav>li:focus-within .hx-mega,.hx-mega.show{transition:opacity .15s ease,transform .22s cubic-bezier(.16,1,.3,1)!important}
.hx-mega{transition:opacity .18s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s .18s!important}
.hx-nav>li:hover .hx-mg-col,.hx-nav>li:focus-within .hx-mg-col,.hx-mega.show .hx-mg-col{animation-duration:.22s!important}
.hx-mg-col:nth-child(2),.hx-mg-col:nth-child(3),.hx-mg-col:nth-child(4){animation-delay:0s!important}
/* 4. while the page scrolls, the repaint-heavy loops (shimmer/rim/pulse) hold still; they resume when the scroll stops (js/smooth.js) */
html.jm-scrolling .jm-hv,html.jm-scrolling .jm-hv::before,html.jm-scrolling .jm-hv::after{animation-play-state:paused!important}

/* 5. owner 3.11 (second pass): the hero's confetti, balloons, rays and sparks move under the frosted chips, search box and countdown;
   every frame they move, the frosted glass is recomputed. They hold still while the pointer is on the header (menu open) and while
   the page scrolls, and carry on right after. */
html.jm-scrolling .hx-cf,html.jm-scrolling .hx-bal,html.jm-scrolling .hx-rays,html.jm-scrolling .hx-spark{animation-play-state:paused!important}
/* 6. the 12 models of the day: the card photo zooms for 1.6 s on hover under two small frosted labels (brand, timer); the frost was
   recomputed on every frame of the zoom. Same labels, a touch more tint instead of the live blur. */
.pc-brand{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(14,12,8,.6)!important}
.pc-timer{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(14,12,8,.7)!important}
/* 7. the 12 models of the day (owner 3.11, second pass: hover felt delayed). Same look:
   - the moving gold rim of all 12 cards is recalculated on every frame; it holds still while the pointer is over the section
     (and while scrolling), so the hovered card lifts without competing work, and moves again when the pointer leaves;
   - the small frosted labels sit over the photo that zooms on hover: a touch more tint instead of a live blur. */
.jchip{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(11,9,7,.62)!important}
/* 8. owner 3.11 (third pass: the homepage menu and the 12 models still felt a little slow; the sale page felt smooth). Measured: at
   rest the homepage keeps the browser busy with its decorative loops (gold shimmer text, confetti and balloons, card rims, pulses
   and sweeps); the sale page has far fewer. While the pointer is on the header/menu or on the 12 models (and while scrolling),
   the decorative loops hold still (js/smooth.js sets html.jm-quiet once on enter/leave); the moment the pointer leaves they carry
   on. Nothing changes at rest; nothing the visitor is using (menu, card lift, photo zoom, countdown, ticker) is paused. */
html.jm-quiet .jm-anim,html.jm-quiet .jm-anim::before,html.jm-quiet .jm-anim::after,
html.jm-scrolling .jm-anim,html.jm-scrolling .jm-anim::before,html.jm-scrolling .jm-anim::after{animation-play-state:paused!important}

/* ===== 9. mobile (owner 3.11: "אופטימיזציה מלאה למובייל": the hero, the spaces cards, the whole homepage). Same look; what changes
   is only what got in the way on a phone, measured at 320/360/390/430 px. Hero photo and balloon: lighter files (front-page.php). */

/* touch: a tap fires at once (no double-tap-zoom wait); pinch zoom still works */
a,button,[role="button"],summary,label,.sx-tb{touch-action:manipulation}

/* touch screens have no hover: a lift/underline-off "hover" stuck on the card or button after a tap. Press feedback (:active) stays. */
@media (hover:none){
  .jc:hover:not(:active),.card:hover:not(:active),.pc:hover:not(:active),.bd-mc:hover:not(:active),.bd-all:hover:not(:active),
  .sx-tb:hover:not(:active),.sx-cb:hover:not(:active),.sx-md-c:hover:not(:active),.wy-t:hover:not(:active),.wy-rc:hover:not(:active),
  .bl-cv:hover:not(:active),.fd-r:hover:not(:active),.cta:hover:not(:active),.hx-btn:hover:not(:active),.ak-go:hover:not(:active),
  .wy-cta1:hover:not(:active),.wy-vb:hover:not(:active),.wy-rb:hover:not(:active),.bl-wa:hover:not(:active),.btn:hover:not(:active),
  .hx-contact:hover:not(:active){transform:none}
  .sx-all:hover,.bl-all:hover{background-size:100% 1px}
}

@media (max-width:760px){
  /* hero countdown: the "שעות / דקות / שניות" labels were 10.5 px */
  .hx-cdb span{font-size:11.5px}

  /* "אבן אחת. כל מרחב בבית.": all the rooms are visible together, ABOVE the photo, as the picker (was a side rail under the
     photo with the last card cut at the screen edge). Tap a card = that room; nothing switches by itself on a phone (site.js). */
  .sx-gr > div:last-child{display:flex;flex-direction:column}
  .sx-th{order:-1;display:grid !important;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px !important;overflow:visible !important;margin:0 0 12px !important;padding:0 !important}
  .sx-tb{height:74px !important;flex:none !important;transition:transform .12s ease-out,box-shadow .35s}
  .sx-tb:active{transform:scale(.97)}
  .sx-tb::after{background:linear-gradient(0deg,rgba(20,15,8,.82) 0%,rgba(20,15,8,.32) 70%,rgba(20,15,8,.18) 100%)}
  .sx-tb.on::after{opacity:1}
  .sx-tb .sx-tl{right:10px !important;left:8px;bottom:9px !important;font-size:13.5px !important;line-height:1.2}
  .sx-tb .sx-tl small{font-size:12px !important;margin-bottom:1px}

  /* the 12 models of the day and the brand cards: the whole model name on two lines (Hebrew names were cut from their start,
     "…ם טאג׳ מאהל"); the deal cards keep two lines on every card so timer and price stay level across a row, the brand cards
     push their price line to the card's foot instead (no empty line under a short name) */
  .band .name,.stage .jcard .name,.bd-mb b{white-space:normal !important;display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;unicode-bidi:plaintext;text-align:right}
  .band .name,.stage .jcard .name{min-height:2.5em}
  /* the same on the sale page's model cards */
  .k-mc .k-mb h3{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.5em}
  .bd-mb b{line-height:1.25}
  .bd-mb{flex:1 1 auto;display:flex;flex-direction:column}
  .bd-mb small{margin-bottom:10px}
  .bd-mb .bd-pr{margin-top:auto !important}

  /* brand heading written in letters (no logo file: Caesarstone Porcelain, Nuovo Corso): the long word fits a 320 px card */
  .bd-logo .bd-wm{font-size:clamp(22px,7vw,28px);letter-spacing:clamp(.18em,1.1vw,.32em)}

  /* "1,400+ דגמים": the number and its word fit the card (the word was cut at the card's edge) */
  .wy-big{flex-wrap:wrap;column-gap:10px !important;row-gap:2px}
  .wy-big .wy-n{font-size:clamp(60px,18vw,96px) !important}
  .wy-big .wy-u{font-size:24px}

  /* customer reviews: a strip you swipe and read at your pace (it slid past under the thumb, a 4-line review left the screen
     in ~7 s, and a phone has no hover to stop it). Each review once; the loop's second copy is only for the desktop marquee. */
  .wy-mq{-webkit-mask-image:none !important;mask-image:none !important}
  .wy-row{animation:none !important;width:auto !important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 20px 22px;scroll-padding-inline:20px;margin-bottom:-14px}
  .wy-row::-webkit-scrollbar{display:none}
  .wy-rc{scroll-snap-align:start;width:min(84vw,330px) !important}
  .wy-rc.wy-dup{display:none}
  .wy-row:focus-visible{outline:2px solid #E6CF9A;outline-offset:-2px;border-radius:26px}

  /* small print a thumb can hit and an eye can read (IS 5568 / WCAG: text ≥ 12 px here, targets ≥ 24 px) */
  .jterms{font-size:12px !important;margin-top:0 !important}
  .band .tag b.num{font-size:12.5px !important}
  .band .jchip{font-size:10.5px !important}
  .ak-tone{font-size:12.5px !important}
  .bd-tag{font-size:11.5px !important}
  .sx-all,.bl-all{position:relative}
  .sx-all::after,.bl-all::after{content:"";position:absolute;inset:-9px -6px}
  footer .f-col li > a,footer li > a,footer li > button{display:inline-block;padding-block:6px;margin-block:-6px}
}
/* hero: the four "included" chips sit in one row from 380 px; below that, two even rows instead of 3 + 1 */
@media (max-width:379px){
  .hx-o-incl{display:grid !important;grid-template-columns:1fr 1fr;gap:6px !important}
  .hx-o-incl li{justify-content:center}
}

/* the sale terms link under each price: a 24 px target on every screen (was ~15 px tall) */
.jterms{padding-block:5px}

/* the search panel's thumbnails wait for the first use of search (js/smooth.js adds .jm-sp-seen); nothing else in the panel changes */
.hx-spanel:not(.jm-sp-seen) .hx-stones img,.hx-spanel:not(.jm-sp-seen) .hx-stoday img{display:none}