.elementor-kit-7{--e-global-color-primary:#EDE7DC;--e-global-color-secondary:#947754;--e-global-color-text:#EDE7DC;--e-global-color-accent:#EFE3A9;--e-global-color-ebf54a07:#0A0A0A;--e-global-color-a404b11e:#141210;--e-global-color-135d2280:#2C2E30;--e-global-typography-primary-font-family:"Assistant";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Assistant";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Assistant";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Assistant";--e-global-typography-accent-font-weight:600;background-color:#0A0A0A;color:#EDE7DC;font-family:"Assistant", Sans-serif;font-size:18px;font-weight:400;line-height:1.75em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:#EFE3A9;font-family:"Assistant", Sans-serif;font-size:17px;font-weight:700;color:#2C2E30;border-radius:2px 2px 2px 2px;padding:16px 34px 16px 34px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:#EDE7DC;color:#0A0A0A;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 p{margin-block-end:20px;}.elementor-kit-7 a{color:#EFE3A9;}.elementor-kit-7 a:hover{color:#EDE7DC;}.elementor-kit-7 h1{color:#EDE7DC;font-family:"Assistant", Sans-serif;font-size:48px;font-weight:800;line-height:1.15em;}.elementor-kit-7 h2{color:#EDE7DC;font-family:"Assistant", Sans-serif;font-size:36px;font-weight:700;line-height:1.25em;}.elementor-kit-7 h3{color:#EDE7DC;font-family:"Assistant", Sans-serif;font-size:28px;font-weight:700;line-height:1.3em;}.elementor-kit-7 h4{color:#EDE7DC;font-family:"Assistant", Sans-serif;font-size:24px;font-weight:600;line-height:1.35em;}.elementor-kit-7 h5{color:#EDE7DC;font-family:"Assistant", Sans-serif;font-size:20px;font-weight:600;line-height:1.4em;}.elementor-kit-7 h6{color:#EDE7DC;font-family:"Assistant", Sans-serif;font-size:18px;font-weight:600;line-height:1.45em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{font-size:17px;}.elementor-kit-7 h1{font-size:40px;}.elementor-kit-7 h2{font-size:32px;}.elementor-kit-7 h3{font-size:25px;}.elementor-kit-7 h4{font-size:22px;}.elementor-kit-7 h5{font-size:19px;}.elementor-kit-7 h6{font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{font-size:16px;}.elementor-kit-7 h1{font-size:32px;}.elementor-kit-7 h2{font-size:28px;}.elementor-kit-7 h3{font-size:22px;}.elementor-kit-7 h4{font-size:20px;}.elementor-kit-7 h5{font-size:18px;}.elementor-kit-7 h6{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* nm build 2026-08-27 · revision 2 */
.nm-ltr, .nm-ltr .elementor-heading-title { direction: ltr; unicode-bidi: isolate; text-align: left; }
.nm-products:not(.nm-carousel) > .e-con-inner { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 52px 28px; align-items: start; }
.nm-products:not(.nm-carousel) > .e-con-inner > .elementor-element { width: auto !important; max-width: none !important; }
@media (max-width:1024px){ .nm-products:not(.nm-carousel) > .e-con-inner { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:767px){ .nm-products:not(.nm-carousel) > .e-con-inner { grid-template-columns: minmax(0,1fr); } }
/* NM-PRODUCTS-CAROUSEL-2026-08-27 - on a phone the eight products were eight full-width rows,
   which is the long scroll lior asked to end. below 768px the strip becomes one
   horizontal track dragged with a thumb: each card takes 76% so the next one peeks
   and the strip reads as continuable. native overflow scrolling does the dragging -
   no plugin javascript - and a small boot script clones the set to close the loop.
   physical scrollbars are hidden; the peeking card is the affordance. */
@media (max-width:767px){
  /* elementor drives wrapping through a custom property -
     .e-con.e-flex > .e-con-inner{flex-wrap:var(--flex-wrap)} outranks any class pair
     we can write here, so the variable is set rather than fought with !important. */
  /* elementor emits --flex-wrap:wrap for this container from post-439.css at
     (0,3,0), and that sheet loads after the kit, so nothing we can write here wins
     on the cascade. flex_wrap is not a responsive control in 4.2.3, so there is no
     mobile value to set inside elementor either. !important on the one custom
     property is the deterministic answer; a specificity trick would flip the day
     elementor renames a class. */
  .nm-products:not(.nm-carousel){ --flex-wrap:nowrap !important; }
  .nm-products:not(.nm-carousel) > .e-con-inner{
    display:flex; flex-wrap:nowrap; grid-template-columns:none;
    gap:14px; padding-inline:14px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    overscroll-behavior-x:contain;
  }
  .nm-products:not(.nm-carousel) > .e-con-inner::-webkit-scrollbar{ display:none; }
  .nm-products:not(.nm-carousel) > .e-con-inner > .nm-card{
    flex:0 0 76%; scroll-snap-align:center;
  }
  .nm-carousel-boot{ display:none !important; }
}
/* the whole card is the link now, so it must read as one. */
.nm-card a.e-con-inner, .nm-card > a{ text-decoration:none; color:inherit; display:block; }
.nm-card{ cursor:pointer; transition:transform .18s ease; }
@media (hover:hover){ .nm-card:hover{ transform:translateY(-4px); } }
.nm-card:focus-within{ outline:2px solid #EFE3A9; outline-offset:4px; }

.nm-panel { aspect-ratio: 4 / 5; overflow: hidden; }
.nm-panel .elementor-widget-image, .nm-panel .elementor-widget-image .elementor-widget-container, .nm-panel .elementor-widget-image figure, .nm-panel .elementor-widget-image .elementor-image { width:100%; height:100%; display:flex; align-items:center; justify-content:center; margin:0; }
.nm-panel img { width:100%; height:100%; object-fit: contain; }
.nm-mark { width: 190px; }
.nm-mark .elementor-widget-container, .nm-mark figure, .nm-mark .elementor-image { width:100%; }
.nm-mark img { width: 100%; height: 90px; object-fit: contain; }
@media (max-width:767px){ .nm-cardbody, .nm-cardbody .elementor-heading-title, .nm-cardbody p { text-align: center !important; } }
@media (max-width:767px){ .nm-hero { min-height: 0 !important; aspect-ratio: 4 / 5; } }
/* rev2 #4 - hero display type on web. the 32-48 range in the source governs the heading scale, not the hero */
.nm-hero .elementor-widget-heading:nth-child(1) .elementor-heading-title { font-size: clamp(42px, 5.2vw, 76px); line-height: 1.04; letter-spacing: .01em; }
.nm-hero .elementor-widget-heading:nth-child(2) .elementor-heading-title { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.3; }
.nm-hero .elementor-widget-heading:nth-child(3) .elementor-heading-title { font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.nm-ltr-center, .nm-ltr-center .elementor-heading-title { text-align: center !important; }
/* source: 'do not make high images, I want to see the content on the first screen' */
.nm-band img { max-height: 560px; width: auto; object-fit: contain; margin-inline: auto; }
.nm-band .elementor-widget-container, .nm-band figure { text-align: center; }
.nm-values { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.nm-values > .elementor-element { width: auto !important; max-width: none !important; }
@media (max-width:767px){ .nm-values { grid-template-columns: minmax(0,1fr); } }
/* gallery: aligned strip - same height, free width, zero crop. click opens full size,
   which is mandatory for the burnt-in Hebrew text assets, not decoration. */
.nm-gallery { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.nm-gallery > .elementor-element { width:auto !important; max-width:none !important; flex:0 0 auto; }
.nm-gallery img { height:190px; width:auto; object-fit:contain; background:#0A0A0A; cursor:zoom-in; }
@media (max-width:767px){ .nm-gallery img { height:140px; } }
.nm-filter { display:flex; flex-wrap:wrap; gap:10px; }
.nm-filter button { font-family:Assistant,sans-serif; font-size:16px; font-weight:600; color:#EDE7DC; background:transparent; border:1px solid #947754; border-radius:2px; padding:9px 20px; cursor:pointer; transition:.18s; }
.nm-filter button:hover { border-color:#EFE3A9; color:#EFE3A9; }
.nm-filter button.is-on { background:#EFE3A9; border-color:#EFE3A9; color:#2C2E30; }
.nm-more .elementor-button { font-size:15px; padding:10px 22px; }
/* Adva, revision 1 at 03:11: 'what about products that might interest you' - her requirement, not in the spec doc */
.nm-relgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 22px; align-items:start; }
.nm-relgrid > .elementor-element { width:auto !important; max-width:none !important; }
@media (max-width:1024px){ .nm-relgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .nm-relgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.nm-lead img { max-height:380px; width:auto; object-fit:contain; }
/* old .nm-brands block removed 1.9.2026 - dead since the strip became links. sizes live only in NM-BRANDS-2026-09-01. */
/* contrast pass 2026-08-27 - every value below was measured on the live DOM */
.elementor-form .elementor-button, .elementor-form button[type=submit] { background-color:#EFE3A9 !important; color:#2C2E30 !important; font-weight:700; }
.elementor-form .elementor-button:hover, .elementor-form button[type=submit]:hover { background-color:#EDE7DC !important; color:#0A0A0A !important; }
.elementor-form .elementor-field, .elementor-form textarea, .elementor-form input { background-color:#0A0A0A !important; color:#EDE7DC !important; border:1px solid #947754 !important; }
.elementor-form .elementor-field::placeholder { color:#B39468 !important; opacity:1; }
.elementor-form .elementor-field-label, .elementor-form .elementor-field-option label { color:#EDE7DC !important; }
.elementor-form .elementor-field-option a { color:#EFE3A9 !important; text-decoration:underline; }
.nm-footbottom, .nm-footbottom a, .nm-footbottom span { color:#B39468 !important; }

/* product page gallery - e-commerce PDP shape, no cart */
.nm-pdp-gal { display:flex; flex-direction:column; gap:14px; }
.nm-pdp-main { display:block; background:#0A0A0A; border:1px solid #947754; aspect-ratio:4/5; overflow:hidden; }
.nm-pdp-main img { width:100%; height:100%; object-fit:contain; display:block; cursor:zoom-in; }
.nm-pdp-thumbs { display:flex; flex-wrap:wrap; gap:10px; }
.nm-pdp-thumbs button { width:74px; height:74px; padding:0; background:#0A0A0A; border:1px solid rgba(148,119,84,.55); cursor:pointer; transition:.18s; }
.nm-pdp-thumbs button:hover { border-color:#EFE3A9; }
.nm-pdp-thumbs button.is-on { border-color:#EFE3A9; box-shadow:0 0 0 1px #EFE3A9 inset; }
.nm-pdp-thumbs img { width:100%; height:100%; object-fit:contain; display:block; }
@media (max-width:600px){ .nm-pdp-thumbs button { width:60px; height:60px; } }

/* rev2 2026-08-27 - the opaque header bar read as a slice through the model's hairline.
   measured: the crop is in the source asset itself; the black bar sitting directly on the
   cut is what made it read as a cut. desktop home page only - the bar goes transparent and
   the hero runs full-bleed behind it, anchored to the top of the image so nothing is
   trimmed above her. the hero regains the header's height so the copy keeps its position.
   menu contrast over the image measured after: worst line 15.3:1, no scrim needed.
   mobile is untouched - it uses a separate hero block (heromob1) with solid #0A0A0A. */
@media (min-width:1025px){
  body.home header.elementor-location-header{
    position:sticky; inset-block-start:0; z-index:99;
    background-color:transparent;
  }
  body.home header.elementor-location-header .elementor-element-c181c11{
    background-color:transparent;
    border-bottom-color:transparent;   /* the separator earns its place over a solid page, not across the photo */
  }
  body.home .elementor-element-9690fc7{
    background-position:50% 0% !important;
    padding-block-start:191px;
    margin-block-start:-103px;   /* the hero climbs back under the now in-flow header */
    min-height:841px;
  }
}

/* rev2 2026-08-27 - about page: former sections 1-8 merged into one scrolling
   section. the page stated the same five pillars twice - once as prose blocks
   1-5, once as the values list in 7 (Quality/Service were near-verbatim
   duplicates). the merge removes the duplication rather than adding a section,
   and the three about-* images already on this page become the pinned frame,
   which is what puts photography into a region that had none. */
.nm-story{ padding-block:1vh 2vh; }
.nm-story-grid{
  max-width:1180px; margin-inline:auto; padding-inline:32px;
  display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr); gap:clamp(32px,6vw,84px);
}

/* the pinned column */
.nm-stage{
  position:sticky; inset-block-start:0; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.nm-frame{
  position:relative; width:100%; max-width:360px; aspect-ratio:4/5;
  border-radius:2px; overflow:hidden; background:#141210;
}
.nm-shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease; will-change:opacity;
}
.nm-shot.is-on{ opacity:1; }
.nm-inf{ width:100%; max-width:230px; overflow:visible; }
.nm-inf-track{ fill:none; stroke:rgba(179,148,104,.16); stroke-width:2.5; }
.nm-inf-draw{
  fill:none; stroke:url(#nmGold); stroke-width:3.2; stroke-linecap:round;
  filter:drop-shadow(0 0 12px rgba(239,227,169,.3));
}
.nm-node{ fill:#0A0A0A; stroke:rgba(179,148,104,.42); stroke-width:2; transition:.45s; }
.nm-node.is-on{ fill:#EFE3A9; stroke:#EFE3A9; filter:drop-shadow(0 0 10px rgba(239,227,169,.72)); }

/* the moving column */
.nm-steps{ padding-block:4vh 5vh; }
.nm-step{
  min-height:30vh; padding-block:1.2vh; display:flex; flex-direction:column; justify-content:center;
  opacity:.3; transition:opacity .5s ease;
}
.nm-step.is-on{ opacity:1; }
.nm-step:has(.nm-val):not(:has(.nm-body)){ min-height:18vh; }   /* the line-only station */
.nm-values-label{
  margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.24em;
  color:#B39468; opacity:0; transition:opacity .5s ease;
}
.nm-values-label.is-on{ opacity:1; }
.nm-val{
  display:block; font-size:12px; font-weight:800; letter-spacing:.22em;
  color:#B39468; margin-block-end:10px;
}
.nm-story .nm-h{
  font-size:clamp(24px,3vw,34px); font-weight:800; line-height:1.28;
  color:#EFE3A9; margin:0 0 14px;
}
.nm-lead{ font-size:20px; color:#fff; margin-block-end:14px; }
.nm-body{ color:#EDE7DC; }
.nm-body p{ margin:0 0 11px; max-width:56ch; }
.nm-body p:last-child{ margin-block-end:0; }

/* NM-ABOUT-STORY-MOBILE-2026-08-27 (v4) - v3 pinned a 390x200 cinematic strip and
   filled it with object-fit:cover. all three about photographs are 4:5 portraits
   (960x1200), so that band was throwing away 59% of each image's height and it cut
   the model's head off. that breaks the standard this project has in writing -
   'faces are never cropped' - and lior caught it on sight.
   v4 stops forcing a portrait into a landscape hole. the plate takes the asset's own
   4:5 ratio and the photograph is shown WHOLE; the room left beside it in the band is
   not waste, it is where the brand loop finally gets to live at a readable size.
   so: whole picture, a proper home for the loop, and the reading column keeps 66%. */
@media (max-width:880px){
  .nm-story-grid{ display:block; padding-inline:0; gap:0; }

  .nm-stage{
    position:sticky; inset-block-start:85px; z-index:2;   /* 85px is the mobile header */
    height:200px; padding:0 18px; gap:14px;
    display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
    background:#0A0A0A;   /* opaque: the copy passes underneath, never through */
  }
  .nm-stage::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:22px;
    background:linear-gradient(180deg,#0A0A0A 0%,rgba(10,10,10,0) 100%);
    pointer-events:none;
  }
  /* the plate carries the asset's own ratio, so nothing is cropped to fit it */
  .nm-frame{
    position:relative; flex:0 0 auto;
    height:168px; width:134px; aspect-ratio:4/5; max-width:none;
    background:#141210; border:1px solid rgba(179,148,104,.34);
  }
  .nm-shot{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain;   /* contain, not cover - the last 1.7% of one asset is not
                             worth risking a face on */
    opacity:0;
  }
  .nm-shot.is-on{ opacity:1; }
  .nm-frame::after{ content:none; }
  /* the loop takes the room beside the plate instead of hiding in a corner */
  .nm-inf{
    position:static; flex:1 1 auto; width:auto; max-width:160px;
    margin-inline:auto; transform:none;
  }

  .nm-steps{ position:relative; z-index:1; padding:8px 22px 6vh; }
  .nm-step{ min-height:52vh; min-height:52svh; opacity:.28; padding-block:3vh; }
  .nm-step.is-on{ opacity:1; }
  .nm-step:has(.nm-val):not(:has(.nm-body)){ min-height:26vh; min-height:26svh; }
  .nm-values-label{ opacity:0; }
  .nm-values-label.is-on{ opacity:1; }
  .nm-story .nm-h{ font-size:clamp(23px,6.2vw,29px); }
  .nm-lead{ font-size:18px; }
  .nm-body p{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .nm-step{ opacity:1; }
  .nm-shot{ transition:none; }
}


/* rev2 2026-08-27 - mobile menu. the source names three things (client-source.md:683):
   open right-to-left, the X to close on the right, and add the logo and phone number.
   none of the three were built. the panel was also white with cream links -
   measured 1.23:1 on three of four items, i.e. effectively invisible. it was missed
   by the 16-page contrast sweep because a closed menu has nothing to measure. */
@media (max-width:1024px){
  .elementor-element-919e516{ position:relative; }

  /* the burger, and the X it turns into, sit on the right */
  .elementor-element-919e516 .elementor-menu-toggle{
    position:relative; z-index:10001; color:#EFE3A9;
  }
  /* open, the burger becomes the X - the source puts that on the right.
     only when open, so it never collides with the logo while closed. */
  .elementor-element-919e516 .elementor-menu-toggle[aria-expanded="true"]{
    position:fixed; top:20px; right:20px; left:auto;
  }

  /* the panel: fixed to the right edge, full height, brand dark */
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown{
    display:block !important;
    position:fixed !important;
    inset-block-start:0 !important; inset-block-end:0 !important;
    right:0 !important; left:auto !important;   /* physical: in RTL inline-end is the LEFT */
    width:min(84vw,330px) !important; height:100%; max-height:none !important;
    margin:0 !important; padding:96px 0 32px !important;
    background:#0A0A0A !important;
    border-left:1px solid rgba(179,148,104,.28);
    overflow-y:auto; z-index:10000;
    transform:translateX(100%); visibility:hidden;
    transition:transform .34s cubic-bezier(.4,0,.2,1), visibility .34s;
  }
  .elementor-element-919e516:has(.elementor-menu-toggle[aria-expanded="true"]) nav.elementor-nav-menu--dropdown{
    transform:translateX(0); visibility:visible;
  }
  .elementor-element-919e516:has(.elementor-menu-toggle[aria-expanded="true"])::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999;
    pointer-events:none;   /* it is a scrim, not a shield - without this it swallows every tap on the links */
  }

  .elementor-element-919e516 nav.elementor-nav-menu--dropdown ul{ background:transparent !important; }
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown .elementor-item{
    color:#EDE7DC !important; background:transparent !important;
    font-size:19px; padding:15px 26px !important; border:0 !important;
  }
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
    color:#EFE3A9 !important; background:transparent !important;
    box-shadow:inset -3px 0 0 #EFE3A9;   /* RTL: the inline-start edge is the right one */
  }

  /* the logo + phone block, parked in the header and moved into the panel by script */
  .nm-mob-extra{ display:none; }
  nav.elementor-nav-menu--dropdown .nm-mob-extra{
    display:block; padding:0 26px 20px; margin-block-end:8px;
    border-block-end:1px solid rgba(179,148,104,.22);
  }
  .nm-mob-extra img{ width:110px; height:auto; display:block; margin-block-end:16px; }
  .nm-mob-extra a{
    display:inline-flex; align-items:center; gap:9px; direction:ltr;
    color:#EFE3A9; text-decoration:none; font-size:18px; font-weight:700;
  }
  .nm-mob-extra a svg{ width:17px; height:17px; fill:currentColor; flex:none; }
}

/* the mobile logo+phone block never shows outside the panel - the hide rule
   lived inside the max-width:1024px query, so on desktop it fell back to
   display:block and printed the logo and phone into the header. */
.nm-mob-extra{ display:none; }

/* NM-STICKY-HEADER-2026-08-27 - the header follows the scroll on every page.
   elementor pro's own sticky was tried first: the setting saved and printed to the
   markup, but its handler never bound to this container, so the behaviour is owned
   here and depends on no plugin javascript.
   the home page keeps its transparent-over-hero decision at scroll top - the hero
   climbs back under the header by exactly the header's height - and the header earns
   a solid ground the moment it leaves the top. a browser without a scroll timeline
   gets that solid ground from the start, which is the safe direction to fail in. */
header.elementor-location-header{ position:sticky; inset-block-start:0; z-index:99; }
@keyframes nm-hdr-solid{
  from{ background-color:rgba(10,10,10,0); border-bottom-color:rgba(148,119,84,0); }
  to  { background-color:rgba(10,10,10,1); border-bottom-color:rgba(148,119,84,1); }
}
@media (min-width:1025px){
  body.home header.elementor-location-header .elementor-element-c181c11{
    animation:nm-hdr-solid linear both;
    animation-timeline:scroll();
    animation-range:40px 140px;
  }
}
@supports not (animation-timeline: scroll()){
  @media (min-width:1025px){
    body.home header.elementor-location-header .elementor-element-c181c11{
      animation:none;
      background-color:#0A0A0A;
      border-bottom-color:#947754;
    }
  }
}

/* NM-MOBILE-MENU-LIGHT-2026-08-27 - the panel was a flat #0A0A0A slab: the type read fine
   at 16:1 but the surface itself read as an unfinished void, and the empty lower
   third had nothing in it at all. this lifts the base to a warm near-black and
   lights it from the top corner where the logo sits, so the panel reads as a lit
   surface rather than a hole. it stays dark and stays JALOR - the brief's
   'dark and luxurious' is untouched. */
@media (max-width:1024px){
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown{
    background:
      radial-gradient(130% 54% at 86% 0%, rgba(239,227,169,.22) 0%, rgba(239,227,169,.08) 42%, rgba(239,227,169,0) 72%),
      radial-gradient(115% 46% at 20% 104%, rgba(179,148,104,.16) 0%, rgba(179,148,104,.05) 45%, rgba(179,148,104,0) 75%),
      linear-gradient(180deg, #262017 0%, #1D1811 40%, #191410 72%, #171310 100%) !important;
    /* the scrim sits at 9999 and the panel's own z-index:10000 never won - elementor
       sets 9997 on .elementor-nav-menu--dropdown with higher specificity, so the 60%
       black overlay has been painting OVER the panel all along. that, not the colour,
       is why it read as almost black. */
    z-index:10001 !important;
    border-left:1px solid rgba(239,227,169,.34);
    box-shadow:-20px 0 48px rgba(0,0,0,.6), inset 1px 0 0 rgba(239,227,169,.12);
  }
  /* the separators were at .22 alpha over black and effectively invisible */
  nav.elementor-nav-menu--dropdown .nm-mob-extra{
    border-block-end:1px solid rgba(239,227,169,.3);
  }
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown li + li .elementor-item{
    border-top:1px solid rgba(239,227,169,.11) !important;
  }
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown .elementor-item{
    color:#F4EFE6 !important;
  }
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-element-919e516 nav.elementor-nav-menu--dropdown .elementor-item:focus{
    color:#EFE3A9 !important;
    background:rgba(239,227,169,.075) !important;
  }
  /* the X sat as bare glyph on whatever was behind it; give it its own ground */
  .elementor-element-919e516 .elementor-menu-toggle[aria-expanded="true"]{
    color:#EFE3A9;
    background:rgba(239,227,169,.1);
    border:1px solid rgba(239,227,169,.26);
    border-radius:50%;
    z-index:10005 !important;
  }
}


/* NM-PRODUCTS-CAROUSEL v4 - 2026-08-31. the home page products strip becomes a
   carousel: four products in view, moved by two round arrows sitting on the
   outer edges - the agency reference is docs/agency-reference/image04.png.
   native overflow scrolling carries the movement and the arrows call scrollBy,
   so this needs no slider plugin and no elementor pro widget.

   SCOPED TO .nm-carousel ON PURPOSE. v4 first wrote these rules against
   .nm-products alone and that class is also on the products category page,
   whose eight cards collapsed into eight full-width rows the moment the grid
   was replaced by a column. lior caught it within the minute. .nm-products
   keeps its grid everywhere; only the home section carries .nm-carousel. */

.nm-products.nm-carousel > .e-con-inner{
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:34px;
  max-width:none;
}
.nm-carousel-boot{ display:none; }   /* the arrows are moved out of it on boot */

.nm-track{ position:relative; --nm-gap:28px; --nm-per:4; --nm-arrow-top:50%; }
.nm-track > .e-con-inner{
  max-width:none;
  display:flex; flex-wrap:nowrap; align-items:flex-start;
  gap:var(--nm-gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.nm-track > .e-con-inner::-webkit-scrollbar{ display:none; }

/* elementor writes --width:23% onto every card from the widths saved in the
   editor, so a basis computed from cards-per-view has to outrank it. */
.nm-track > .e-con-inner > .nm-card{
  flex:0 0 calc((100% - (var(--nm-per) - 1) * var(--nm-gap)) / var(--nm-per));
  width:auto !important; max-width:none !important;
  scroll-snap-align:start;
}

/* the arrows straddle the outer edge of the strip exactly as the reference does.
   --nm-arrow-top is written by the boot script from the measured panel height,
   so they sit on the middle of the picture and never on the copy. */
.nm-arrow{
  position:absolute; top:var(--nm-arrow-top); z-index:5;
  width:44px; height:44px;
  /* the kit's global button rule sets border-radius:2px at a higher specificity,
     which is what turned the round arrows into little squares. caught by the
     screenshot, not by the measurements - the numbers all read correct. */
  border-radius:50% !important;
  display:flex; align-items:center; justify-content:center;
  /* the kit gives every <button> 16px/34px; under border-box that padding alone
     already measures 70px, so width:44px silently lost and the arrow hung 11px
     off the left edge of the page. measured, not guessed. */
  padding:0 !important; box-sizing:border-box; flex:none; cursor:pointer;
  color:#0A0A0A; background:#EFE3A9; border:1px solid #EFE3A9;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}
.nm-arrow svg{ width:20px; height:20px; display:block; }
.nm-arrow-left{  left:0;  transform:translate(-50%,-50%); }
.nm-arrow-right{ right:0; transform:translate(50%,-50%); }
.nm-arrow:hover:not(:disabled){ background:#EDE7DC; border-color:#EDE7DC; }
.nm-arrow:focus-visible{ outline:2px solid #EFE3A9; outline-offset:3px; }
.nm-arrow:disabled{ opacity:.28; cursor:default; box-shadow:none; }
.nm-arrow[hidden]{ display:none !important; }

.nm-cta > .e-con-inner{ display:flex; justify-content:center; max-width:none; }

@media (max-width:1024px){ .nm-track{ --nm-per:3; --nm-gap:22px; } }
@media (max-width:767px){
  .nm-track{ --nm-per:2; --nm-gap:16px; }
  .nm-arrow{ width:38px; height:38px; }
  .nm-arrow svg{ width:17px; height:17px; }
}
@media (max-width:600px){
  .nm-track > .e-con-inner > .nm-card{ flex:0 0 78%; }
}

/* the card copy is one right-aligned block - title, line, tag - which is how the
   reference sets its cards; the h3 was the odd one out. physical `right`, not
   logical `start`, so a latin product name can never be re-resolved by a stray
   direction:ltr, and !important because elementor writes text-align:start onto
   the widget from the per-page sheet, which loads after this one.
   from 768px up only: below that the card copy is centred, which was decided
   earlier and is not part of what was asked here. */
@media (min-width:768px){
  .nm-cardbody,
  .nm-cardbody .elementor-heading-title,
  .nm-cardbody p{ text-align:right !important; }
}

/* ============================================================
   REVISION 3 - adva, 31.8.2026. comments 4 / 6 / 28 / 33.
   appended last on purpose: every rule here is a deliberate
   override of something written earlier in this same sheet.
   ============================================================ */

/* --- #6 - the hero copy block sits on the vertical middle of the picture.
   the container's justify-content is now center (set in elementor); the 191px
   top padding was there to hold the copy in place under the transparent header,
   and asymmetric padding is exactly what stops centred from meaning centred. */
@media (min-width:1025px){
  body.home .elementor-element-9690fc7{ padding-block-start:88px; }
}

/* --- #4 - rounded corners on the product cards, per juvenil.co.il which adva
   linked in her own reply on that comment. the panel already clips its image
   with overflow:hidden, so the radius on the panel rounds the picture too. */
.nm-panel{ border-radius:12px; }
.nm-card{ border-radius:12px; }

/* --- #28 - the product page gallery: no frame, black square, the picture
   fills the whole square, rounded corners. cover is what "fills" means and it
   does crop - that is the instruction, not an accident. */
.nm-pdp-main{ border:0 !important; border-radius:12px; }
.nm-pdp-main img{ object-fit:cover; }
.nm-pdp-thumbs button{ border-radius:8px; overflow:hidden; }

/* --- #33 - the footer social icons centre on the LOGO, not on the column.
   measured live before the change: logo centre 1208, icon-row centre 1250 -
   42px apart, because both are right-aligned but the logo is 210px wide and
   the icon row only 126px. giving the row the logo's width and centring inside
   it puts both centres on one axis whatever the column does.
   physical margins, not logical: in hebrew inline-start is the RIGHT edge. */
.elementor-element-6ca3ba5 .elementor-social-icons-wrapper{
  display:flex; justify-content:center; align-items:center;
  width:210px; margin-right:0; margin-left:auto;
}
/* adva's reply on that comment is two words: "over - gold". at rest the glyphs
   are already #EFE3A9, so a gold hover on top of gold would be invisible; the
   rest state drops to the brand's muted gold (already used by .nm-footbottom)
   so the gold hover is something you can actually see. */
.elementor-element-6ca3ba5 .elementor-social-icon i,
.elementor-element-6ca3ba5 .elementor-social-icon svg{
  color:#B39468 !important; fill:#B39468 !important;
  transition:color .18s ease, fill .18s ease;
}
.elementor-element-6ca3ba5 .elementor-social-icon:hover i,
.elementor-element-6ca3ba5 .elementor-social-icon:hover svg,
.elementor-element-6ca3ba5 .elementor-social-icon:focus-visible i,
.elementor-element-6ca3ba5 .elementor-social-icon:focus-visible svg{
  color:#EFE3A9 !important; fill:#EFE3A9 !important;
}
.elementor-element-6ca3ba5 .elementor-social-icon{ background-color:transparent !important; }
@media (max-width:1024px){
  .elementor-element-6ca3ba5 .elementor-social-icons-wrapper{
    width:auto; margin-left:auto; margin-right:auto;
  }
}

/* #28 follow-up. cover is adva's instruction and it is right for six of the
   eight products, whose gallery images are portrait 4:5 (measured crop 0-12%).
   the other two are the SAME pair whose cards were wrong: their source images
   are landscape, and cover throws away 48% of the cannula and 67% of the mesco
   needles - sideways. those two stay on contain until portrait product
   photography exists for them; this rule comes out the day it does. */
body.postid-460 .nm-pdp-main img,
body.postid-461 .nm-pdp-main img{ object-fit:contain; }

/* ============================================================
   REV3C - 31.8.2026. comments 4 / 9 / 10, after lior's correction.
   the card was a picture inside a brown plate inside a black page:
   two frames doing nothing. the card IS the picture now - it sits
   straight on the black, the only shape is the rounded corner adva
   asked for, and every image fills the same box so the row reads as
   one strip instead of eight differently-sized objects.
   ============================================================ */

.nm-panel{
  background-color:transparent !important;   /* elementor writes #141210 on the container */
  padding:0 !important;
  border:0 !important;
  border-radius:12px;
  aspect-ratio:4/5;
  overflow:hidden;
}
/* comment 10, the maintenance rule: adva's own words are "if he uploads images
   that are landscape and not portrait, just zoom in on the image". that is
   object-fit:cover - scale until the box is full, crop what hangs over. it is
   what makes every card the same size no matter what tamir uploads next, and
   it is why the shape lives on the container and never on the file. */
.nm-panel img{
  width:100%; height:100%;
  object-fit:cover !important;
  object-position:center;
  border-radius:12px;
  display:block;
}
/* the wrappers elementor puts between the panel and the img must not re-introduce
   the letterboxing the plate used to create */
.nm-panel .elementor-widget-image,
.nm-panel .elementor-widget-image .elementor-widget-container,
.nm-panel .elementor-widget-image figure,
.nm-panel .elementor-widget-image .elementor-image{
  width:100%; height:100%; margin:0; padding:0; display:block;
}

/* no frame, per lior: the gold is a reaction to touch, not a border that is
   always on. it reuses the glow already used elsewhere on the site. */
.nm-card{ border-radius:12px; outline:0; transition:transform .18s ease, box-shadow .22s ease; }
@media (hover:hover){
  .nm-card:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(239,227,169,.55), 0 10px 30px rgba(0,0,0,.55); }
}
.nm-card:focus-visible,
.nm-card:focus-within{ box-shadow:0 0 0 2px #EFE3A9, 0 0 22px rgba(239,227,169,.45); outline:0; }

/* the product page gallery follows the same rule now that both blocked products
   have portrait originals, so the postid guard written earlier comes out. */
.nm-pdp-main{ border:0 !important; border-radius:12px; background:#0A0A0A; }
.nm-pdp-main img{ object-fit:cover !important; object-position:center; }
body.postid-460 .nm-pdp-main img,
body.postid-461 .nm-pdp-main img{ object-fit:cover !important; }

/* ============================================================
   COMMENT 5 - "turn the image into parallax", adva. the pin sits on the closing
   band of the home page.

   the first attempt drifted background-position by 72px and lior called it what
   it was - limp. this is treatment D: the picture is pinned to the viewport and
   the band is a window cut through the page onto it, so the copy travels and the
   image holds still. that is the move, and it needs no scroll listener at all.

   clip-path:inset(0) is what does it. it makes the band a containing block for
   fixed descendants, so ::before is fixed to the viewport yet clipped to the
   band. background-attachment:fixed would read the same on desktop and is simply
   ignored by ios, which is why it is not used here.

   the ground is bokeh-band-v2.webp, 2560x1440, generated from the palette
   sampled out of the client own about-teaser-bg.webp - that file is 930x620 and
   was being upscaled 1.53x on desktop and 3.06x on a retina screen, which is the
   whole reason the band read as blurred. nothing in css could have fixed that.
   ============================================================ */

.nm-parallax{
  position:relative;
  background-color:#0A0A0A;
  clip-path:inset(0);            /* the window. also the containing block. */
  isolation:isolate;
}
.nm-parallax::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background-image:url("https://infinityesthetic.co.il/wp-content/uploads/2026/08/bokeh-band-v2.webp");
  background-size:cover;
  background-position:50% 38%;
  pointer-events:none;
}
/* the scrim earns the copy its contrast without flattening the picture */
.nm-parallax::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,10,.88) 0%,
    rgba(10,10,10,.58) 42%,
    rgba(10,10,10,.62) 62%,
    rgba(10,10,10,.9) 100%);
}
.nm-parallax > .e-con-inner,
.nm-parallax > *{ position:relative; z-index:2; }

/* a phone repaints a fixed layer on every scroll frame and the band is tall
   there; the picture stays, the window trick does not. */
@media (max-width:767px){
  .nm-parallax{ clip-path:none; }
  .nm-parallax::before{
    position:absolute;
    background-position:50% 42%;
  }
}


/* NM-PDP-HEADING-SCALE-2026-09-01 - the product page heading scale.
   WHY THIS EXISTS: elementor emits a global widget default
   .elementor-widget-heading .elementor-heading-title{font-size:var(--e-global-typography-primary-font-size)}
   which lives in post-445.css (the footer template) and therefore applies to EVERY
   heading widget on the site. the kit primary typography has no font size, so that
   var is undefined, the declaration is dropped, and every heading widget falls back
   to the body 18px. the kit own h1/h2/h3 globals (48/36/28) never win because
   (0,2,0) outranks .elementor-kit-7 h1 (0,1,1). a fix therefore needs three classes.
   SCOPED ON PURPOSE to .nm-posthead / .nm-related: the same leak is live on every
   other page too, and widening it is a separate decision for lior. */
.nm-posthead .elementor-widget-heading h1.elementor-heading-title{
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.12;
}
.nm-posthead .elementor-widget-heading h3.elementor-heading-title{
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4;
}
.nm-related .elementor-widget-heading h2.elementor-heading-title{
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25;
}


/* NM-JALOR-ROWS-2026-09-01 - the closing Jalor block on the about page.
   adva, pin 7: rows of image + text, with a slight tint change between rows.
   built in the SAME vocabulary as .nm-story directly above it - that is the
   section she said works. deliberately static: the page already does the
   pinned-scroll trick once, and doing it twice is what made this block read
   as noise. what was actually broken before: three .nm-band images at
   object-fit:contain landed at 800x298, 393x560 and 448x560 - the box has to
   decide the shape, not the file. */
.nm-jalor{ display:flex; flex-direction:column; gap:20px; }
.nm-jhead{ text-align:center; }
.nm-jalor .nm-jmark{ font-size:clamp(22px,2.2vw,28px); font-weight:800; letter-spacing:.16em; color:#EFE3A9; direction:ltr; margin:0 0 6px; line-height:1.2; }
.nm-jalor .nm-jtag{ font-size:clamp(12px,1.1vw,14px); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#B39468; direction:ltr; margin:0 0 26px; line-height:1.4; }
.nm-jband{ aspect-ratio:5/2; border-radius:20px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(239,227,169,.16); }
.nm-jband img{ width:100%; height:100%; object-fit:cover; object-position:center 34%; display:block; }

.nm-jrow{ display:grid; align-items:stretch; border-radius:20px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(239,227,169,.10); background:var(--nm-jtint,#141210); }
/* rtl: grid column 1 is the RIGHT one. */
.nm-jr-right{ grid-template-columns:.72fr 1.28fr; }
.nm-jr-left { grid-template-columns:1.28fr .72fr; }
.nm-jr-right .nm-jpic{ grid-column:1; grid-row:1; }
.nm-jr-right .nm-jtxt{ grid-column:2; grid-row:1; }
.nm-jr-left  .nm-jpic{ grid-column:2; grid-row:1; }
.nm-jr-left  .nm-jtxt{ grid-column:1; grid-row:1; }
/* a warming run down the section rather than a two-tone stripe. */
.nm-jt1{ --nm-jtint:#100E0C; } .nm-jt2{ --nm-jtint:#16130F; }
.nm-jt3{ --nm-jtint:#1C1813; } .nm-jt4{ --nm-jtint:#221D16; }

/* fixed 4/5 frame, like .nm-story above: the box decides the shape, and the length of the copy must never decide how an image is cropped. */
.nm-jpic{ aspect-ratio:4/5; align-self:center; border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(239,227,169,.16); margin:clamp(20px,2.2vw,34px); }
.nm-jpic img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.nm-jtop img{ object-position:center top; }
.nm-jtxt{ padding:clamp(28px,3.2vw,52px); display:flex; flex-direction:column; justify-content:center; }
.nm-jrule{ display:block; width:48px; height:2px; border-radius:2px; background:#EFE3A9; opacity:.85; margin:0 0 18px; }
.nm-jtxt h3{ font-size:clamp(20px,2.4vw,26px); font-weight:800; line-height:1.3; color:#EFE3A9; margin:0 0 14px; }
.nm-jtxt p, .nm-jtxt ul{ max-width:58ch; }
.nm-jtxt a{ font-weight:700; letter-spacing:.03em; }

/* motion: same grammar as .nm-story and the sticky header - scroll driven, no JS,
   always behind @supports and prefers-reduced-motion. staged per element so a row
   ASSEMBLES itself instead of appearing as one lump, and the frame stands still while
   the photograph settles inside it - the move the closing section on the home page
   already makes. the four gold rules all draw from the same edge, so the gesture
   repeats down the section and ties the rows into one run. */
/* 🔴 overflow:hidden makes a box a scroll container, and a view() timeline then
   measures its subject against THAT box instead of the page - so every reveal below
   sat frozen at its end state, animation bound to a real ViewTimeline and never
   advancing. overflow:clip crops identically WITHOUT creating a scrollport.
   the hidden above stays as the fallback for browsers without clip - they have no
   view() either, so nothing spills there. */
@supports (overflow: clip){
  .nm-jrow, .nm-jpic, .nm-jband{ overflow:clip; }
}

@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
  /* the frame is 461px tall and the rule is 2px, so identical percentages do NOT
     stagger - a small element clears its own entry range almost instantly. the
     photograph gets a shorter range so it still leads the row. */
  .nm-jpic     { animation:nmJFade   linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; }
  .nm-jpic img { animation:nmJSettle linear both; animation-timeline:view(); animation-range:entry 0% cover 35%; }
  .nm-jrule    { transform-origin:right center; animation:nmJDraw linear both; animation-timeline:view(); animation-range:entry 26% entry 82%; }
  .nm-jtxt h3  { animation:nmJRise linear both; animation-timeline:view(); animation-range:entry 30% entry 86%; }
  .nm-jtxt p, .nm-jtxt ul { animation:nmJRise linear both; animation-timeline:view(); animation-range:entry 36% entry 96%; }
  .nm-jband img{ animation:nmJSettle linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; }
  @keyframes nmJFade  { from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
  @keyframes nmJRise  { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  @keyframes nmJDraw  { from{ opacity:0; transform:scaleX(0); }        to{ opacity:.85; transform:scaleX(1); } }
  @keyframes nmJSettle{ from{ transform:scale(1.09); }                 to{ transform:scale(1); } }
} }

@media (max-width:900px){
  .nm-jr-right, .nm-jr-left{ grid-template-columns:1fr; }
  .nm-jr-right .nm-jpic, .nm-jr-left .nm-jpic{ grid-column:1; grid-row:1; }
  .nm-jr-right .nm-jtxt, .nm-jr-left .nm-jtxt{ grid-column:1; grid-row:2; }
  .nm-jband{ aspect-ratio:3/2; }
}


/* NM-PDP-FRAME-2026-09-01 - adva: the hero must sit in one frame on desktop,
   image together with the thumbnails under it, and the column on the left has to
   be centred against it - there was too much empty space.
   MEASURED before, at 1440x900: header 103 + top padding 52 leaves 797px, and the
   gallery was 892 tall (image 576x720 + 14 + thumbs 158). the thumbnails could not
   be in the frame at all. the text column was 364 tall pinned to the top of a 892
   picture column - 528px of dead space under it.
   the gallery width is now derived from the viewport height rather than guessed,
   so the whole stack fits on a 768-tall laptop too. 4/5 is untouched - the box
   still decides the shape. */
.nm-pdp-gal{ width:min(448px, calc((100svh - 300px) * 0.8)); margin-inline:auto; }
.nm-pdp-thumbs{ justify-content:center; }
/* 7 thumbnails is the max any product has - 7x52 + 6x10 = 424 fits the 448 column in one row. */
.nm-pdp-thumbs button{ width:52px; height:52px; }
/* adva pins 11 + 12 on /pydcolex: "move this so it starts at the middle of the IMAGE",
   and the follow-up pin marks the height with the word "centred".
   MEASURED: the copy column was centred on the whole gallery COLUMN (image 155-715 plus
   a 14px gap and a 52px thumbnail row), whose centre is 468 - while the photograph
   centre is 435. 33px low, which is exactly the offset she pinned.
   with align-items:center a flex item is centred INCLUDING its margins, so a bottom
   margin of the full thumb strip (52 + 14) lifts the content by half of it - 33px -
   and lands the copy centre on the photograph centre.
   the same fix as home pin 6, which she accepted. residual: on a viewport under ~830
   tall the gallery narrows enough that 6-7 thumbnails wrap to two rows and this
   under-corrects by ~31px. products with 5 or fewer thumbnails are exact everywhere. */
.nm-phead-copy{ margin-block-end:66px; }
@media (max-width:1024px){ .nm-phead-copy{ margin-block-end:0; } }
/* vertical centring is NOT done here: elementor owns align-items on .e-con-inner and
   also sets --align-items per element, so css loses either way. it is set as
   flex_align_items:center on the .nm-posthead container in each of the 8 product pages,
   which is also where tamir and adva can see it in the editor. */
@media (max-width:1024px){
  .nm-pdp-gal{ width:auto; }
}


/* NM-PCARD-STRETCH-2026-09-01 - adva asked for the "read more" buttons to go. on the
   category page that button was the ONLY link into the product: those cards were never
   clickable, unlike the ones on the home page.
   🔴 the obvious fix - html_tag:a + link on the card container, the way the home page
   does it - CANNOT be used here. these cards already contain anchors (the image and the
   title), and an <a> may not nest: the parser splits the outer anchor into empty
   fragments and hoists .nm-panel and .nm-cardbody out of it. it did exactly that on the
   live page - 8 cards rendered as 24 zero-height anchors and the grid collapsed.
   so the card stays a div and the TITLE anchor is stretched across it: one link, the
   product name as its accessible name, whole card clickable, no nesting. */
.nm-pcard{ position:relative; }
/* the overlay resolves against the nearest POSITIONED ancestor, and elementor makes
   both .nm-cardbody and the heading widget wrapper position:relative - so the first
   attempt only covered the 275x32 heading. these two go static so .nm-pcard is the
   containing block and the overlay actually spans the card. */
.nm-pcard .nm-cardbody,
.nm-pcard .nm-cardbody > .elementor-widget-heading{ position:static; }
.nm-pcard .nm-cardbody h3 a::after{ content:""; position:absolute; inset:0; z-index:2; }


/* NM-CONTACT-2026-09-01 - adva pins 18 + 20.
   18: "the contact page does not look good, make it more like mediglow" + a reply
   with a gold-bokeh image attached for the background.
   20: "the spacing here does not match the spacing in the contact form, and all
   this content overruns the contact box - i want symmetry".
   MEASURED before: form column 576x609 with a 1px border and 28/26/32 padding,
   details column 552x489 with NO border and NO padding. two different widths, two
   different heights, one boxed and one not - that is the asymmetry, exactly.
   mediglow does not solve it with two matched columns, it uses ONE centred column
   over a bokeh background with the contact details on a single line under the form.
   that removes the second column entirely, so there is nothing left to be
   asymmetric with - 18 and 20 close together. */
.nm-contact > .e-con-inner{ max-width:1200px; }
.nm-cform{ width:100%; max-width:760px; }
.nm-cform .elementor-heading-title{ text-align:center; font-size:clamp(22px,2.6vw,30px); line-height:1.3; }
/* the details row is capped to the SAME 760 as the form box, so the two share an edge.
   at 960 it overhung the box by 100px on each side - which is the very thing pin 20
   complained about, just mirrored. measured: 150+190+158+150 = 648 of content, so a
   34px gap keeps all four on one line inside 760. */
.nm-cdetails{ width:100%; max-width:760px; }
/* adva: drop the field labels, the placeholder already carries the name. the form
   widget IS set to label_position:none and elementor duly emits .elementor-labels-none,
   but its own rule for that class never lands here - the label still computed display:block.
   hidden visually rather than deleted: a placeholder is not an accessible label, so the
   <label> stays in the dom for screen readers. */
.nm-cform .elementor-labels-none .elementor-field-label{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nm-clist{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:22px 34px; margin:0; padding:0; list-style:none; text-align:center; }
.nm-clist li{ margin:0; min-width:120px; }
/* #947754 on the darkened bokeh measured about 3.2:1 - under AA for 13px text, which is
   what the contrast mark was about. the row now sits on the same panel as the form and
   the label goes up to the lighter brown the site already uses for small labels. */
.nm-clabel{ display:block; color:#B39468; font-size:13px; letter-spacing:.14em; margin:0 0 6px; line-height:1.4; }
.nm-cval{ display:block; color:#EDE7DC; font-size:17px; line-height:1.5; }
.nm-cval a{ color:#EFE3A9; text-decoration:none; }
.nm-cval a:hover{ color:#EDE7DC; }
@media (max-width:600px){
  .nm-clist{ gap:18px 26px; }
  .nm-clist li{ min-width:44%; }
  .nm-cform{ padding:28px 20px 32px !important; }
}


/* NM-BRANDS-2026-09-01 - adva pin 1, per lior video 00:16-00:41.
   the strip is a FILTER, not decoration. each logo is a real link to
   /products/?brand=<slug>; on the products page js intercepts it, filters in place
   and pushes the url, so the address is always shareable and the back button works.
   brand name in text under the logo, and NO hover effect - his words, twice.
   an is-on underline stays: that is state, not hover, and without it a filtered
   grid gives the user nothing to read. */
.nm-brands{ display:flex; flex-wrap:wrap; gap:56px; justify-content:center; align-items:flex-start; }
.nm-brand{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; padding:6px 10px 4px; border-bottom:2px solid transparent; }
.nm-brand img{ height:110px; width:auto; object-fit:contain; display:block; }
.nm-brand-name{ font-size:14px; font-weight:700; letter-spacing:.08em; color:#EDE7DC; line-height:1.2; }
/* no hover treatment anywhere on the strip - deliberate. */
.nm-brand.is-on{ border-bottom-color:#EFE3A9; }
.nm-brand.is-on .nm-brand-name{ color:#EFE3A9; }
.nm-brand:focus-visible{ outline:2px solid #EFE3A9; outline-offset:4px; }
@media (max-width:600px){
  .nm-brands{ gap:28px; }
  .nm-brand img{ height:76px; }
  .nm-brand-name{ font-size:13px; }
}

/* NM-LOOPGRID-HOME 2026-09-07 */
.nm-loop .elementor-loop-container{--grid-column-gap:28px;--grid-row-gap:52px;column-gap:28px;row-gap:52px}
.nm-loop .elementor-widget-loop-grid{width:100%}
.nm-cardbody .nm-desc,.nm-cardbody .nm-desc .elementor-heading-title{font-size:16px;line-height:1.6;opacity:.82;margin:0;color:#EDE7DC!important}
.nm-cardbody .nm-tag,.nm-cardbody .nm-tag .elementor-heading-title{font-size:15px;letter-spacing:.06em;margin:0;opacity:1;color:#EFE3A9!important}
.e-loop-item>.nm-card{height:100%}
@media(max-width:1024px){.nm-loop .elementor-loop-container{--grid-column-gap:22px;--grid-row-gap:40px;column-gap:22px;row-gap:40px}}
@media(max-width:767px){.nm-loop .elementor-loop-container{--grid-column-gap:14px;--grid-row-gap:34px;column-gap:14px;row-gap:34px;padding-inline:0}}

/* NM-LOOPCARD-LINK 2026-09-07 */
.e-loop-item .nm-card{position:relative}
.e-loop-item .nm-cardbody h3 a{color:inherit;text-decoration:none}
.e-loop-item .nm-cardbody h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.e-loop-item .nm-tag a{color:inherit;text-decoration:none;pointer-events:none}

/* NM-LOOPCARD-CLICK 2026-09-07 */
.e-loop-item .nm-card{position:relative}
.e-loop-item .nm-cardbody,.e-loop-item .nm-cardbody>.elementor-widget-heading,.e-loop-item .nm-panel{position:static}
.e-loop-item .nm-cardbody h3 a::after{content:"";position:absolute;inset:0;z-index:3}

/* NM-LOOPCARD-WEIGHT 2026-09-07 */
.e-loop-item .nm-cardbody .nm-desc,.e-loop-item .nm-cardbody .nm-desc .elementor-heading-title,.e-loop-item .nm-cardbody .nm-tag,.e-loop-item .nm-cardbody .nm-tag .elementor-heading-title{font-weight:400}

/* NM-IQC-RATIO 2026-09-11 */
.nm-foot-iqc img{aspect-ratio:1/1;height:auto}/* End custom CSS */