/* ============================================================
   BLOCKS
   The blocks sourced from Pinterest keep their appearance —
   arch radius, olive hairline, card structure, grid geometry.
   Only the CONTENT is adapted: Dafna's photography, Hebrew, RTL.
   ============================================================ */

/* ------------------------------------------------------------
   HERO — panel with Dafna at the start edge, copy at the end
   ------------------------------------------------------------ */
.hero{ padding-top:var(--s6) }
.hero__panel{
  position:relative; overflow:hidden;
  background:var(--stone); display:flex; aspect-ratio:16/5.1; width:100%;
}
.hero__img{ position:absolute; inset:0 }
.hero__img img{ width:100%; height:100%; object-fit:cover; object-position:center 30% }
.hero__copy{
  position:relative; z-index:2;
  width:min(560px,46%); padding:var(--s5) var(--s6);
  display:grid; align-content:center; gap:18px;
}
.hero__copy .eyebrow{ letter-spacing:.24em }
.hero__copy h1 strong{ font-weight:700 }
.hero__copy .lede{ max-width:42ch }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s2) }

@media (max-width:1024px){
  .hero__panel{ aspect-ratio:auto; min-height:0; flex-direction:column }
  .hero__img{ position:relative; inset:auto; aspect-ratio:16/10; width:100% }
  .hero__img img{ object-position:14% center }
  .hero__copy{ width:100%; padding:var(--s5) var(--s4) var(--s6); background:var(--panel) }
}
@media (max-width:640px){
  .hero__img{ aspect-ratio:5/4 }
  .hero__img img{ object-position:10% center }
}

/* ------------------------------------------------------------
   PCARD — the arch card. Geometry measured from the mockup:
   outer radius 44, cream body, inset olive hairline, inner
   image with its own 26px radius.
   ------------------------------------------------------------ */
.pband{ background:var(--panel); padding:var(--s6) var(--s5) }
.pband__eyebrow{ text-align:center; margin-bottom:var(--s5) }

.pgrid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
@media (max-width:1024px){ .pgrid3{ grid-template-columns:repeat(2,1fr); gap:var(--s3) } }
@media (max-width:640px) { .pgrid3{ grid-template-columns:1fr } }

.pcard{
  background:var(--card); padding:10px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover{ transform:translateY(-4px) }
.pcard__inner{
  border:1px solid var(--hairline); padding:18px 18px 26px; height:100%;
  display:grid; gap:16px; align-content:start;
}
.pcard__img{ overflow:hidden; aspect-ratio:4/5; background:var(--stone) }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1) }
.pcard:hover .pcard__img img{ transform:scale(1.05) }
.pcard__t{
  text-align:center; font-size:22px; font-weight:600; line-height:1.28;
  color:var(--olive-ink); letter-spacing:-.005em;
}
.pcard__d{ text-align:center; font-size:13.5px; line-height:1.7; color:var(--muted-2); max-width:30ch; margin-inline:auto }
.pcard__tag{
  text-align:center; font-size:11px; letter-spacing:.22em; font-weight:600;
  color:var(--hairline); text-transform:uppercase;
}
@media (max-width:640px){ .pcard__t{ font-size:19px } }

/* ------------------------------------------------------------
   FILTERS — the outlined chips from the shop page
   ------------------------------------------------------------ */
.chips{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s6) }
.chip{
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  padding:11px 28px; font-size:var(--small); border-radius:0;
  transition:background .25s, color .25s;
}
.chip:hover{ background:var(--panel) }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper) }
@media (max-width:640px){ .chips{ gap:10px } .chip{ padding:10px 20px; font-size:14px } }

/* ------------------------------------------------------------
   BGRID — the BESTSELLERS register.
   4 columns; the label occupies the first cell; hairline rules
   separate the cells. Mirrored to RTL so the label sits at the
   start edge and products flow right-to-left.
   ------------------------------------------------------------ */
.bgrid{
  background:var(--panel); padding:var(--s5);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.bgrid__label{
  display:flex; align-items:flex-start; padding:14px var(--s4) var(--s4) 0;
  font-size:22px; font-weight:600; letter-spacing:-.005em; color:var(--ink);
}
.bcell{
  border:1px solid var(--line); margin:-0.5px;
  padding:18px 18px 20px;
  display:grid; gap:12px; align-content:start;
  background:transparent; transition:background .3s;
}
.bcell:hover{ background:rgba(255,255,255,.45) }
.bcell__tag{ font-size:11px; letter-spacing:.18em; font-weight:600; color:var(--hairline) }
.bcell__img{ aspect-ratio:1/1; display:grid; place-items:center; padding:10px }
.bcell__img img{ max-height:100%; max-width:100%; width:auto; object-fit:contain;
                 transition:transform .6s cubic-bezier(.2,.7,.3,1) }
.bcell:hover .bcell__img img{ transform:scale(1.06) }
.bcell__n{ font-size:13px; letter-spacing:.06em; line-height:1.5; min-height:2.6em; margin-top:4px }
.bcell__meta{ font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px }

@media (max-width:1024px){
  .bgrid{ grid-template-columns:repeat(2,1fr); padding:var(--s4) }
  .bgrid__label{ grid-column:1/-1; font-size:24px; padding-bottom:var(--s3) }
}
@media (max-width:640px){ .bcell__img{ padding:var(--s2) } .bcell__n{ font-size:12px } }

/* ------------------------------------------------------------
   ABOUTME — rebuilt properly in Hebrew RTL.
   Same structure as the reference: display title, script line,
   paragraph, then a ruled achievements list, photo alongside.
   ------------------------------------------------------------ */
.about{ background:var(--panel); overflow:hidden;
        display:grid; grid-template-columns:.92fr 1.08fr; align-items:stretch }
.about__copy{ padding:var(--s6) }
.about__kicker{ font-size:var(--label); letter-spacing:.28em; font-weight:600;
                text-transform:uppercase; color:var(--muted) }
.about__script{ font-size:var(--h3); font-weight:300; color:var(--ink);
                letter-spacing:-.01em; margin-top:14px }
.about__p{ margin-top:var(--s4); color:var(--muted); max-width:52ch; font-size:var(--body) }
.about__h4{ font-size:var(--label); letter-spacing:.24em; text-transform:uppercase;
            font-weight:600; margin-top:var(--s6); color:var(--ink) }
.about__list{ list-style:none; margin:var(--s3) 0 0; padding:0 }
.about__list li{ display:flex; gap:14px; align-items:baseline;
                 padding-block:16px; border-bottom:1px solid var(--line); font-size:var(--small) }
.about__list li::before{ content:"•"; color:var(--hairline) }
.about__img img{ width:100%; height:100%; object-fit:cover; min-height:100% }
@media (max-width:1024px){
  .about{ grid-template-columns:1fr }
  .about__copy{ padding:var(--s6) var(--s4) }
  .about__img{ aspect-ratio:4/3 }
}

/* ------------------------------------------------------------
   DARK — before/after + testimonials
   ------------------------------------------------------------ */
.dark{ background:var(--ink); color:var(--paper);
       padding:var(--s7) var(--s6); position:relative; overflow:hidden }
.dark .eyebrow{ color:rgba(242,241,236,.5) }
.dark__wm{
  position:absolute; inset-inline-end:var(--s6); top:var(--s5);
  font-size:clamp(56px,6.5vw,108px); font-weight:700; line-height:.9;
  color:rgba(242,241,236,.055); pointer-events:none; user-select:none; letter-spacing:-.02em;
}
.dark__head{ position:relative; z-index:2; text-align:start; margin-bottom:var(--s6);
             display:grid; gap:var(--s3); justify-items:start }
.dark__head h2 strong{ font-weight:700 }
.dark__head p{ color:rgba(242,241,236,.66); max-width:52ch }

.batrio{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.bacard{ background:var(--ink-2); padding:12px; display:grid; gap:12px }
.bacard__img{ overflow:hidden; aspect-ratio:3/4; background:#000 }
.bacard__img img{ width:100%; height:100%; object-fit:cover }
.bacard__meta{ display:flex; justify-content:space-between; align-items:baseline;
               border-top:1px solid rgba(242,241,236,.14); padding-top:12px; gap:12px }
.bacard__meta b{ font-weight:600; font-size:14px }
.bacard__meta span{ font-size:12px; color:rgba(242,241,236,.5) }
@media (max-width:1024px){ .batrio{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px) { .batrio{ grid-template-columns:1fr } .dark{ padding:var(--s6) var(--s4) } }

.tstgrid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.tst{ background:var(--ink-2); padding:var(--s4);
      display:grid; gap:var(--s3); align-content:space-between }
.tst q{ font-size:16px; line-height:1.8; quotes:"”" "„" }
.tst footer{ border-top:1px solid rgba(242,241,236,.14); padding-top:14px }
.tst footer b{ display:block; font-size:14px; font-weight:600 }
.tst footer span{ font-size:12px; color:rgba(242,241,236,.5) }
@media (max-width:1024px){ .tstgrid{ grid-template-columns:1fr } }

/* ------------------------------------------------------------
   PRODUCT ROW (home) + brand marquee
   ------------------------------------------------------------ */
.prow{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4) }
.prow__i{ display:grid; gap:var(--s2); justify-items:center; text-align:center }
.prow__i .ph{ aspect-ratio:1/1; width:100%; display:grid; place-items:center; padding:var(--s3) }
.prow__i .ph img{ max-height:100%; width:auto; transition:transform .6s cubic-bezier(.2,.7,.3,1) }
.prow__i:hover .ph img{ transform:scale(1.07) }
.prow__i b{ font-size:14px; font-weight:500 }
.prow__i span{ font-size:12px; color:var(--muted-2); letter-spacing:.08em }
@media (max-width:1024px){ .prow{ grid-template-columns:repeat(2,1fr); gap:var(--s5) } }

.marq{ background:var(--ink); overflow:hidden; padding-block:26px; margin-top:var(--s7) }
.marq__track{ display:flex; gap:var(--s9); width:max-content; animation:marq 34s linear infinite }
.marq span{ font-size:15px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
            color:rgba(242,241,236,.66); white-space:nowrap }
@keyframes marq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marq__track{ animation:none } }

/* ------------------------------------------------------------
   FAQ — accordion, same look as the reference block
   ------------------------------------------------------------ */
.faq{ background:var(--panel); padding:var(--s6) var(--s6) var(--s7) }
.faq__head{ text-align:center; margin-bottom:var(--s6) }
.faq__head .eyebrow{ color:var(--hairline) }
.faq__head h2{ display:inline-block; position:relative; padding-bottom:8px }
.faq__head h2::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--hairline);
}
.faq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) }
.qa{ background:var(--paper); overflow:hidden; align-self:start }
.qa__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
        padding:18px 20px; text-align:start; font-size:15px; font-weight:600 }
.qa__ic{ flex:none; width:24px; height:24px; border:1px solid var(--ink); color:var(--ink);
         display:grid; place-items:center; font-size:14px; transition:transform .3s }
.qa[data-open] .qa__ic{ transform:rotate(45deg) }
.qa__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease }
.qa[data-open] .qa__a{ grid-template-rows:1fr }
.qa__a > div{ overflow:hidden }
.qa__a p{ padding:0 22px 22px; font-size:14px; line-height:1.8; color:var(--muted) }
@media (max-width:1024px){ .faq__grid{ grid-template-columns:1fr } .faq{ padding:var(--s6) var(--s4) } }