/* ==========================================================================
   רקמה ממוחשבת על בגדים וכובעים - service page (preview view)

   Shell: the cart-page header + footer, the paper ground and the type from
   theme.css. Composition borrows from the site's own pages:
     hero            about-preview (display headline, lead, photo opposite)
     facts strip     about-preview's values strip, with the spec figures set
                     in the display face like the home page's technique panels
     side index      shipping-preview / the legal pages (site-motion.js follows it)
     garments        five category cards on the sand tile
     steps           three numbered stations joined by a running stitch, the
                     same dashed thread the about page sews down its steps
     comparison      hairline rows: method, when it fits, a job photo
     questions       the shipping-preview accordion
     closing box     the sand box from shipping-preview (pickup)
   Photos: only the theme's own. The embroidered caps, the flat garment
   cutouts from the home page's board, the catalogue cutouts (never cropped
   sideways: their soft shadow must stay whole), the DTF film and the screen
   printed tee from the technique panels.
   Motion: nothing new. site-motion.js fades the sections up (.policy-content >
   section), moves the index marker (.policy-desktop-nav) and raises the h1.
   ========================================================================== */

.emb-layout{
  --emb-tile:color-mix(in srgb,var(--color-sand-300) 15%,var(--paper-background));
  --emb-box:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background));
  --emb-soft:var(--color-soft-foreground);
  /* one stitch: 6px of thread, 5px of cloth */
  --emb-thread:repeating-linear-gradient(to left,var(--color-primary) 0 6px,transparent 6px 11px);
  --emb-thread-down:repeating-linear-gradient(to bottom,var(--color-primary) 0 6px,transparent 6px 11px);
  max-width:1320px;width:100%;min-width:0;margin:0 auto;padding:22px 40px 72px;
}
.emb-layout [dir="ltr"]{unicode-bidi:isolate}
.emb-layout p a{color:var(--color-primary)}
.embroidery-page :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}
/* punctuation that joins a label to its value when the line is read as one
   sentence; set as a label over a figure, the layout does that job */
.emb-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.emb-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:64px;align-items:center;padding:30px 0 60px}
.emb-eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--emb-soft);margin:0 0 20px;text-align:right;text-align:match-parent}
.emb-hero h1{font:700 clamp(64px,6.7vw,98px)/.94 var(--f-display);margin:0 0 26px}
.emb-h1-line{display:block}
.emb-lead{font-size:20px;line-height:1.7;max-width:540px;margin:0 0 14px}
.emb-lead-more{font-size:16px;line-height:1.75;max-width:500px;margin:0 0 30px;color:var(--emb-soft)}
.emb-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.embroidery-page .submit{display:inline-flex;width:auto;min-height:52px;margin:0;padding:15px 30px;font-size:16px;text-decoration:none}
.emb-text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-primary);font-size:15px;text-underline-offset:5px}
/* the cap sits on the sand tile; the shadow under it is a gradient, not a
   filter (Safari cuts a filter shadow off at the image box) */
.emb-hero-art{position:relative;display:grid;place-items:center;margin:0;justify-self:center;width:100%;max-width:600px;aspect-ratio:6/5;border-radius:8px;background:var(--emb-tile);overflow:hidden}
.emb-hero-art::before{content:'';position:absolute;left:12%;right:6%;top:64%;height:17%;border-radius:50%;background:radial-gradient(closest-side,var(--cap-contact-mid) 0%,var(--cap-shadow-near) 45%,transparent 100%)}
.emb-hero-art img{position:relative;display:block;width:80%;height:auto;margin-top:-3%}
.emb-hero-art figcaption{position:absolute;inset-inline-start:20px;bottom:16px;font-size:12px;color:var(--emb-soft)}

/* ── The figures, straight under the hero ─────────────────────────────── */
.emb-facts{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 60px;align-items:start;padding:30px 0 44px;border-top:1px solid var(--color-rule)}
.emb-facts-label{font-size:14px;line-height:1.7;color:var(--emb-soft);margin:2px 0 0;max-width:160px}
.emb-fact-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.1fr);gap:0 36px}
.emb-fact{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;grid-row:1 / span 2}
.emb-fact:nth-child(1){grid-column:1}
.emb-fact:nth-child(2){grid-column:2}
.emb-fact:nth-child(3){grid-column:3;grid-row:1}
.emb-fact+.emb-fact,.emb-fact-note{border-inline-start:1px solid var(--color-rule);padding-inline-start:36px}
.emb-fact-k{order:-1;font-size:14px;line-height:1.5;color:var(--emb-soft)}
.emb-fact-v{font:700 clamp(34px,3vw,44px)/1 var(--f-display);font-synthesis:none}
.emb-fact-n{font-size:13px;line-height:1.5;color:var(--emb-soft)}
/* the last figure is about the date too, so it closes the lead-time column */
.emb-fact-note{grid-column:3;grid-row:2;padding-top:4px;font-size:13px;line-height:1.5;color:var(--emb-soft)}

/* ── Index + content ──────────────────────────────────────────────────── */
.emb-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:60px;align-items:start}
.emb-nav{display:flex;flex-direction:column;align-items:start;gap:4px;position:sticky;top:100px;border-top:1px solid var(--color-rule);padding-top:14px}
.emb-nav a{padding:10px 0;text-decoration:none;font-size:15px;transition:color var(--motion-feedback) var(--ease-out)}
.emb-nav a:hover{color:var(--color-primary)}
.emb-content{min-width:0}
.emb-content>section{scroll-margin-top:105px;border-top:1px solid var(--color-rule);padding-top:32px}
.emb-content>section+section{margin-top:72px}
.emb-content section h2{font:700 clamp(40px,3.5vw,50px)/1.04 var(--f-display);margin:0 0 14px}
.emb-section-lead{font-size:17px;line-height:1.7;margin:0 0 30px;max-width:620px}
.emb-note{font-size:14px;line-height:1.8;color:var(--emb-soft);margin:26px 0 0;max-width:680px}

/* ── What it is: the heading beside the copy (about-preview) ──────────── */
.emb-what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:56px;align-items:start}
.emb-content .emb-what h2{margin:0}
.emb-what p{font-size:19px;line-height:1.8;margin:2px 0 0;max-width:620px}

/* ── Garments: five categories, one row ───────────────────────────────── */
.emb-garment-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.emb-garment{min-width:0}
.emb-garment a{display:block;text-decoration:none}
.emb-garment-photo{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:8px;background:var(--emb-tile)}
.emb-garment-photo img{--zoom:1.14;display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--zoom));transition:transform var(--motion-glow) var(--ease-out)}
/* the coat is the one long garment; the cap keeps its whole soft shadow */
.emb-garment--long img{--zoom:.94}
.emb-garment--cap img{--zoom:.96}
.emb-garment a:hover img{transform:scale(calc(var(--zoom) * 1.04))}
/* name at the start of the line, the way in at its end */
.emb-garment h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:400 17px/1.35 var(--f-text);margin:14px 0 6px}
/* five in a row: the size follows the card, so the longest category name
   (סווטשירטים וקפוצ׳ונים) holds one line from 1181px up to the full width */
@media(min-width:1181px){.emb-garment h3{font-size:clamp(14px,calc(1.3vw - 1.3px),16.5px)}}
.emb-garment h3::after{content:'←';color:var(--color-primary);transition:transform var(--motion-lift) var(--ease-out)}
.emb-garment a:hover h3::after{transform:translateX(-3px)}
.emb-garment p{font-size:14px;line-height:1.7;color:var(--emb-soft);margin:0}

/* ── How it works: three stations on one thread ───────────────────────── */
.emb-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;counter-reset:emb-step}
.emb-steps li{position:relative;min-width:0}
.emb-steps li::before{counter-increment:emb-step;content:"0" counter(emb-step);display:block;font:400 40px/1 'Anton SC',sans-serif;color:var(--color-primary);margin-bottom:18px}
.emb-steps li:not(:last-child)::after{content:'';position:absolute;top:19px;inset-inline:60px -26px;height:2px;background:var(--emb-thread)}
.emb-steps p{margin:0;font-size:17px;line-height:1.7;max-width:280px}
.emb-step-more{display:block;margin-top:8px;font-size:14px;line-height:1.7;color:var(--emb-soft)}
.emb-nowrap{white-space:nowrap}
.emb-ship{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:56px;align-items:start;margin-top:44px;padding:28px 34px;border-radius:12px;background:var(--emb-box)}
.emb-ship p{margin:0;font-size:16px;line-height:1.8;color:var(--color-muted-foreground);max-width:600px}
.emb-ship .emb-ship-lead{font-size:20px;line-height:1.55;color:var(--color-foreground)}

/* ── Embroidery, DTF or screen print: rows that compare ───────────────── */
.emb-methods{border-top:1px solid var(--color-rule)}
.emb-method{display:grid;grid-template-columns:170px minmax(0,1fr) 204px;gap:40px;align-items:center;padding:22px 0;border-bottom:1px solid var(--color-rule)}
.emb-method h3{font:700 40px/1 var(--f-display);margin:0}
.emb-method--here h3{color:var(--color-primary)}
.emb-method p{font-size:17px;line-height:1.75;margin:0;max-width:540px}
.emb-method-art{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:var(--emb-tile)}
.emb-method-art img{display:block}
/* the job photographs, composed the way the home page leaves them at the end
   of each technique's animation (numbers from screen-hero.js). The film keeps
   the home page's own thin-sheet shadow; it lies well inside the tile, so
   nothing can cut it. */
.emb-dtf{position:absolute;left:50%;top:50%;height:90%;aspect-ratio:1216/1846;transform:translate(-50%,-50%) rotate(-5deg)}
.emb-dtf-film{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 3px var(--film-shadow-near)) drop-shadow(0 8px 12px var(--film-shadow-far))}
.emb-dtf-art{position:absolute;left:50%;top:50%;width:68%;height:auto;transform:translate(-50%,-50%)}
.emb-tee{position:absolute;left:50%;top:50%;height:124%;aspect-ratio:1536/1024;transform:translate(-50%,-50%)}
.emb-tee-shirt{position:absolute;inset:0;width:100%;height:100%}
.emb-tee-ink{position:absolute;left:30.19%;top:21.07%;width:39.62%;aspect-ratio:1}
.emb-tee-ink img{position:absolute;inset:0;width:100%;height:100%}
.emb-method-cap{position:absolute;left:50%;top:50%;width:96%;height:auto;transform:translate(-50%,-48%)}
.emb-ask{font-size:17px;line-height:1.7;margin:26px 0 0}
.emb-ask a{margin-inline-start:10px;white-space:nowrap}

/* ── Tips: three columns, each opened by three stitches ───────────────── */
.emb-tip-list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.emb-tip-list li{position:relative;min-width:0;padding-top:24px;font-size:17px;line-height:1.75}
.emb-tip-list li::before{content:'';position:absolute;top:0;inset-inline-start:0;width:28px;height:2px;background:var(--emb-thread)}
.emb-tip-list li+li{border-inline-start:1px solid var(--color-rule);padding-inline-start:36px}
.emb-tip-list li+li::before{inset-inline-start:36px}

/* ── Questions ────────────────────────────────────────────────────────── */
.emb-content .emb-faq h2{margin-bottom:20px}
.emb-faq details{padding:0;border-bottom:1px solid var(--color-rule)}
.emb-faq details:first-of-type{border-top:1px solid var(--color-rule)}
.emb-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0;font-size:17px}
.emb-faq summary::after{content:'+';color:var(--color-primary);font-size:25px;line-height:1}
.emb-faq details[open] summary::after{content:'−'}
.emb-faq summary::-webkit-details-marker{display:none}
.emb-faq details p{margin:0 0 22px;font-size:15px;line-height:1.8;max-width:600px;color:var(--color-muted-foreground)}

/* ── Starting: the sand box, the quote request, three categories ──────── */
.emb-content>.emb-start{border-top:0;padding-top:0}
.emb-start-box{display:grid;grid-template-columns:minmax(0,1fr) 426px;gap:48px;align-items:center;padding:42px 46px;border-radius:12px;background:var(--emb-box)}
.emb-content .emb-start h2{font-size:clamp(46px,4vw,58px);margin-bottom:16px}
.emb-start-copy p{font-size:16px;line-height:1.8;margin:0 0 26px;max-width:560px}
.emb-start-copy p a{white-space:nowrap}
.emb-start-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.emb-start-cats a{display:block;text-decoration:none}
/* catalogue cutouts: whole image, never trimmed and never zoomed (the soft
   shadow must stay whole), standing on the tile's floor */
.emb-start-photo{display:block;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--paper-background)}
.emb-start-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.emb-start-name{display:block;margin-top:10px;font-size:14px;line-height:1.4;text-align:center;transition:color var(--motion-feedback) var(--ease-out)}

/* ── Narrow desktop and tablet ────────────────────────────────────────── */
@media(max-width:1180px){
  .emb-hero{gap:40px}
  .emb-facts{grid-template-columns:160px minmax(0,1fr);gap:0 40px}
  .emb-fact-list{gap:0 24px}
  .emb-fact+.emb-fact,.emb-fact-note{padding-inline-start:24px}
  .emb-grid{grid-template-columns:160px minmax(0,1fr);gap:40px}
  .emb-what{gap:36px}
  .emb-garment-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
  .emb-method{grid-template-columns:140px minmax(0,1fr) 170px;gap:28px}
  .emb-method h3{font-size:36px}
  /* the three categories drop under the copy and keep a readable size */
  .emb-start-box{grid-template-columns:minmax(0,1fr);gap:30px;padding:34px}
  .emb-start-cats{max-width:440px}
}
@media(max-width:940px){
  .emb-layout{padding-inline:28px}
  .emb-facts{display:block}
  .emb-facts-label{max-width:none;margin-bottom:20px}
  .emb-grid{grid-template-columns:150px minmax(0,1fr);gap:30px}
  .emb-what{grid-template-columns:minmax(0,1fr);gap:14px}
  .emb-steps{gap:0 28px}
  .emb-steps li:not(:last-child)::after{inset-inline-end:-18px}
  .emb-ship{grid-template-columns:minmax(0,1fr);gap:12px}
  .emb-method{grid-template-columns:minmax(0,1fr) 150px;gap:6px 24px}
  .emb-method h3{grid-column:1;grid-row:1;align-self:end}
  .emb-method p{grid-column:1;grid-row:2;align-self:start}
  .emb-method-art{grid-column:2;grid-row:1 / span 2}
  .emb-tip-list{grid-template-columns:minmax(0,1fr);gap:22px}
  .emb-tip-list li+li{border-inline-start:0;padding-inline-start:0}
  .emb-tip-list li+li::before{inset-inline-start:0}
}

/* ── Phone: 16px gutters, the headline held to the width of the screen ──
   The single column starts at 760px: under that the two-column hero breaks
   the headline's second line, and a side index leaves the cards no room. */
@media(max-width:760px){
  .emb-layout{padding:14px 16px 48px}
  .emb-hero{display:block;padding:22px 0 30px}
  .emb-eyebrow{margin-bottom:14px}
  .emb-hero h1{font-size:clamp(46px,16vw,72px);line-height:.95;margin-bottom:20px}
  .emb-lead{font-size:17px;line-height:1.7;margin-bottom:12px}
  .emb-lead-more{font-size:15px;line-height:1.7;margin-bottom:24px}
  .emb-actions{gap:10px 16px}
  .embroidery-page .submit{min-height:48px;padding:13px 24px;font-size:15px}
  .emb-hero-art{margin-top:28px;aspect-ratio:4/3}
  .emb-hero-art img{width:76%}
  .emb-hero-art figcaption{inset-inline-start:14px;bottom:12px}
  .emb-facts{padding:22px 0 30px}
  .emb-facts-label{font-size:13px;margin-bottom:6px}
  .emb-fact-list{display:block}
  .emb-fact{gap:6px;padding:16px 0;border-bottom:1px solid var(--color-rule)}
  .emb-fact+.emb-fact,.emb-fact-note{border-inline-start:0;padding-inline-start:0}
  .emb-fact-k{font-size:13px}
  .emb-fact-v{font-size:38px}
  .emb-fact-note{padding-top:14px}
  .emb-grid{display:block}
  .emb-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:2px 20px;padding:6px 0 12px;border-top:1px solid var(--color-rule)}
  .emb-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:13px;text-decoration:underline}
  .emb-nav .motion-spy{display:none}
  .emb-content>section{scroll-margin-top:84px;padding-top:24px}
  .emb-content>section+section{margin-top:48px}
  .emb-content section h2{font-size:40px;margin-bottom:12px}
  .emb-section-lead{font-size:15px;margin-bottom:22px}
  .emb-note{font-size:13px;margin-top:20px}
  .emb-what p{font-size:16px;line-height:1.8}
  /* cards become rows: the picture at the start, the copy beside it */
  .emb-garment-list{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--color-rule)}
  .emb-garment{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:121px;padding:14px 0;padding-inline-start:108px;border-bottom:1px solid var(--color-rule)}
  .emb-garment-photo{position:absolute;inset-inline-start:0;top:14px;width:92px;aspect-ratio:1}
  .emb-garment h3{justify-content:flex-start;margin:0 0 4px;font-size:18px}
  .emb-garment p{font-size:14px;line-height:1.6}
  /* the thread turns and runs down the three numbers */
  .emb-steps{grid-template-columns:minmax(0,1fr);gap:0;margin-top:6px}
  .emb-steps li{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:start;padding-bottom:26px}
  .emb-steps li:last-child{padding-bottom:0}
  .emb-steps li::before{font-size:30px;margin:0}
  .emb-steps li:not(:last-child)::after{top:40px;bottom:8px;inset-inline:17px auto;width:2px;height:auto;background:var(--emb-thread-down)}
  .emb-steps p{font-size:16px;max-width:none;padding-top:2px}
  .emb-ship{margin-top:30px;padding:22px 20px;gap:10px}
  .emb-ship p{font-size:15px}
  .emb-ship .emb-ship-lead{font-size:18px}
  .emb-method{grid-template-columns:minmax(0,1fr) 104px;gap:4px 16px;padding:20px 0;align-items:start}
  .emb-method h3{font-size:34px;align-self:start}
  .emb-method p{font-size:15px;line-height:1.7}
  .emb-method-art{aspect-ratio:1;margin-top:4px}
  .emb-tee{height:150%}
  .emb-ask{font-size:16px;margin-top:22px}
  .emb-ask a{display:flex;align-items:center;gap:8px;width:fit-content;min-height:44px;margin:2px 0 0}
  .emb-tip-list{gap:20px;margin-top:20px}
  .emb-tip-list li{font-size:16px;padding-top:18px}
  .emb-faq summary{font-size:16px;padding:18px 0}
  .emb-faq details p{font-size:14px}
  .emb-start-box{padding:24px 20px 22px;gap:26px}
  .emb-content .emb-start h2{font-size:46px;margin-bottom:12px}
  .emb-start-copy p{font-size:15px;margin-bottom:22px}
  .emb-start-cats{gap:10px;max-width:none}
  .emb-start-name{font-size:13px;margin-top:8px}
}
/* small tablets and phones on their side: the same single column, wider gutters */
@media(min-width:601px) and (max-width:760px){
  .emb-layout{padding-inline:28px}
  .emb-hero-art{max-width:520px;margin-inline:auto}
  .emb-start-cats{max-width:440px}
}
@media(prefers-reduced-motion:reduce){.emb-garment-photo img,.emb-garment h3::after,.emb-start-name,.emb-nav a{transition:none}}
/* a tap must not leave a card stuck in its hover state */
@media(hover:none){.emb-garment a:hover img{transform:scale(var(--zoom))}.emb-garment a:hover h3::after{transform:none}}

/* English retains the composition with a readable Latin type scale. */
html[lang^="en"] .emb-hero h1{font-size:clamp(46px,5.4vw,80px);line-height:1.06}
html[lang^="en"] .emb-content section h2{font-size:clamp(34px,3vw,44px);line-height:1.12}
html[lang^="en"] .emb-method h3{font-size:34px;line-height:1.1}
html[lang^="en"] .emb-garment h3::after{transform:scaleX(-1)}
html[lang^="en"] :is(.emb-ask a,.emb-text-link[href$=".html"]) [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}