/* ==========================================================================
   Service page: branded fleece with embroidery (פליז ממותג ורקמה).
   Built from the information pages' vocabulary: paper ground, Karantina
   display headings, sand hairlines, brand blue for anything actionable.
   Colours come from theme.css tokens only.

   Motion hooks (site-motion.js, nothing new):
     .information-layout h1         title rise on arrival
     .policy-desktop-nav            the marker that follows the section being read
     .policy-content > section      scroll reveal
     .about-visit (closing panel)   scroll reveal
   policy-preview.css and about-preview.css are not loaded here, so those class
   names carry no styles of their own.
   ========================================================================== */

.service-fleece-page {
  --fleece-soft: var(--color-soft-foreground);
  --fleece-muted: var(--color-muted-foreground);
  --fleece-panel: color-mix(in srgb, var(--color-sand-300) 17%, var(--paper-background));
  --fleece-card: color-mix(in srgb, var(--paper-background) 97%, var(--paper-foreground));
  /* the running stitch: three short stitches of thread-blue */
  --fleece-stitch: repeating-linear-gradient(to left, var(--color-primary) 0 6px, transparent 6px 10px);
}

/* margin 0 auto, not auto: in a window taller than the page the content still starts under the header */
.fleece-layout { max-width: 1240px; width: 100%; min-width: 0; margin: 0 auto; padding: 24px 40px 72px; }
.fleece-layout :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.fleece-layout :where(ul, ol) { padding: 0; list-style: none; }
.fleece-layout :where(h2, h3) { font-weight: 400; }
.fleece-layout :where(p, li, figcaption, dd) { text-wrap: pretty; }
.fleece-layout bdi { unicode-bidi: isolate; }
.fleece-layout :is(a, summary):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.fleece-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 56px; align-items: end; padding-top: 18px; }
.fleece-note { font-size: 12px; color: var(--fleece-soft); margin-bottom: 26px; }
.fleece-hero h1 { font: 700 clamp(70px, 7.1vw, 102px)/.95 var(--f-display); margin-bottom: 30px; }
.fleece-lead { font-size: 21px; line-height: 1.65; max-width: 520px; margin-bottom: 14px; }
.fleece-lead-more { font-size: 16px; line-height: 1.8; max-width: 500px; color: var(--fleece-muted); margin-bottom: 30px; }
.fleece-actions { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.service-fleece-page .submit { margin: 0; width: auto; min-height: 54px; padding: 16px 32px 15px; font-size: 16px; text-decoration: none; }
.fleece-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--color-primary); font-size: 16px; text-underline-offset: 5px; }

/* Two real shop photos, standing side by side on one ground line. The white
   studio background multiplies into the paper; each frame keeps its own paper
   fill so the blend never depends on what is painted behind the figure. */
.fleece-lineup { min-width: 0; }
.fleece-lineup-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--color-rule-strong); }
.fleece-figure { display: block; aspect-ratio: 66 / 100; overflow: hidden; background: var(--paper-background); }
.fleece-figure img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.fleece-figure--men img { object-position: 70.3% 50%; }
.fleece-figure--women img { object-position: 56.3% 50%; }
.fleece-lineup figcaption { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--fleece-soft); }

/* ── The service at a glance ────────────────────────────────────────────── */
/* closed below by the index and first section's own top rules, so no bottom border here */
.fleece-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 30px 0 0; margin: 52px 0 64px; border-top: 1px solid var(--color-rule); }
.fleece-specs dt { font-size: 13px; color: var(--fleece-soft); margin-bottom: 10px; }
.fleece-specs strong { display: block; font: 700 44px/1 var(--f-display); font-synthesis: none; white-space: nowrap; }
/* the shekel sign comes from a system face (theme.css), so it is set small beside the display numerals */
.fleece-currency { font-size: .56em; margin-inline-end: .1em; }
.fleece-specs dd > span { display: block; max-width: 230px; margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--fleece-muted); }

/* ── Side index + sections ──────────────────────────────────────────────── */
.fleece-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 70px; }
.fleece-nav { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; align-items: start; gap: 2px; padding-top: 14px; border-top: 1px solid var(--color-rule); }
.fleece-nav a { padding: 10px 0; font-size: 15px; text-decoration: none; }
.fleece-nav a:hover { color: var(--color-primary); }
.fleece-content { min-width: 0; }
.fleece-section { scroll-margin-top: 104px; padding: 38px 0 70px; border-top: 1px solid var(--color-rule); }
.fleece-section:last-child { padding-bottom: 8px; }
.fleece-section h2 { font: 700 clamp(42px, 4vw, 56px)/1.02 var(--f-display); margin-bottom: 18px; }
.fleece-section-lead { font-size: 18px; line-height: 1.75; max-width: 640px; }
.fleece-section-more { font-size: 16px; line-height: 1.8; max-width: 600px; margin-top: 14px; color: var(--fleece-muted); }
.fleece-content p a { color: var(--color-primary); text-underline-offset: 4px; }

/* Who it suits */
.fleece-who-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; margin-top: 30px; }
.fleece-who-list li { display: flex; align-items: center; gap: 18px; padding: 21px 0; border-top: 1px solid var(--color-rule); font-size: 19px; line-height: 1.45; }
.fleece-who-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-rule); }
.fleece-who-list li::before { content: ''; flex: none; width: 26px; height: 2px; background: var(--fleece-stitch); }

/* The models: the shop's own card (white photo tile, tinted footer, blue name). */
.fleece-model-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.fleece-model { position: relative; display: flex; flex-direction: column; background: var(--fleece-card); }
.fleece-model-photo { display: block; aspect-ratio: 1; overflow: hidden; background: var(--color-white); }
.fleece-model-photo img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s var(--ease-out); }
.fleece-model-text { padding: 16px 16px 20px; }
.fleece-model h3 { font-size: 16px; line-height: 1.4; margin-bottom: 8px; text-wrap: balance; }
.fleece-model h3 a { color: var(--paper-primary); text-decoration: none; }
.fleece-model h3 a::after { content: ''; position: absolute; inset: 0; }
.fleece-model p { font-size: 14px; line-height: 1.7; color: var(--fleece-soft); }
@media (hover: hover) {
  .fleece-model:hover .fleece-model-photo img { transform: scale(1.035); }
  .fleece-model:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
}
.fleece-models-note { margin-top: 22px; font-size: 14px; line-height: 1.7; color: var(--fleece-soft); }

/* Why embroidery: the fabric up close, and a logo already stitched. */
.fleece-embroidery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 60px; align-items: start; }
/* photo across the top; under it the cap (pulled up over the photo's corner) beside the caption */
.fleece-embroidery-art { display: grid; grid-template-columns: 58% minmax(0, 1fr); column-gap: 16px; align-items: start; }
/* The collar close-up, framed on the fabric alone: zip, Nirlon tab and fleece
   (the frame shows the photo's middle 77%, from 48% down, so no face and no studio white). */
.fleece-fabric { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px; background: var(--fleece-panel); }
.fleece-fabric img { position: absolute; top: -100%; left: -15%; width: 130%; max-width: none; height: auto; }
.fleece-cap { position: relative; grid-column: 1; width: 100%; height: auto; margin-top: -47%; margin-inline-start: -46px; }
.fleece-embroidery-art figcaption { grid-column: 2; margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--fleece-soft); }

/* How to order: four steps on one running stitch (the about page's thread, drawn still). */
.fleece-order-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 26px; }
.fleece-steps { position: relative; border-top: 1px solid var(--color-rule); }
.fleece-steps::before { content: ''; position: absolute; top: 34px; bottom: 34px; inset-inline-start: 13px; width: 2px; background: repeating-linear-gradient(to bottom, var(--color-primary) 0 5px, transparent 5px 9px); }
.fleece-steps li { display: flex; align-items: center; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--color-rule); }
.fleece-step-num { position: relative; flex: none; inline-size: 28px; padding-block: 9px; text-align: center; font: 400 21px/1 'Anton SC', sans-serif; color: var(--color-primary); background: var(--paper-background); direction: ltr; }
.fleece-steps p { font-size: 19px; line-height: 1.5; }
.fleece-order-note { padding: 26px 28px 20px; border-radius: 12px; background: var(--fleece-panel); }
.fleece-order-note p { font-size: 16px; line-height: 1.75; }
.fleece-order-note p + p { margin-top: 12px; }
.fleece-order-note .fleece-link { margin-top: 8px; font-size: 15px; }

/* Times, delivery, pickup */
.fleece-delivery-facts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; margin-top: 26px; }
.fleece-delivery h3 { font-size: 19px; margin-bottom: 8px; }
.fleece-delivery-facts p { font-size: 15px; line-height: 1.8; color: var(--fleece-muted); }
.fleece-pickup { display: grid; grid-template-columns: minmax(0, 1fr) 145px; align-items: center; gap: 30px; padding: 30px; margin-top: 38px; border-radius: 12px; background: var(--fleece-panel); }
.fleece-pickup p { font-size: 16px; line-height: 1.75; max-width: 520px; }
.fleece-pickup .fleece-pickup-phone { margin-top: 12px; font-size: 15px; }
.fleece-pickup-art { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 12px; border: 2px solid var(--color-primary); border-radius: 7px; color: var(--color-primary); transform: rotate(-4deg); }
.fleece-pickup-art span { font-size: 21px; }
.fleece-pickup-art strong { font: 400 90px/1.15 'Anton SC', sans-serif; }
.fleece-pickup-art small { font-size: 16px; }

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

/* ── Closing call ───────────────────────────────────────────────────────── */
.fleece-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 76px; padding: 42px 46px; background: var(--fleece-panel); }
.fleece-cta h2 { font: 700 clamp(46px, 4.6vw, 64px)/1.04 var(--f-display); margin-bottom: 10px; }
.fleece-cta p { font-size: 17px; line-height: 1.7; }
.fleece-cta-actions { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Narrower screens ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .fleece-model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleece-embroidery { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 44px; }
  .fleece-order-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 1040px) {
  .fleece-specs strong { font-size: 38px; }
  .fleece-embroidery { grid-template-columns: 1fr; gap: 30px; }
  .fleece-embroidery-art { max-width: 420px; }
  .fleece-cap { margin-inline-start: -8px; }
}
@media (max-width: 900px) {
  .fleece-layout { padding-inline: 28px; }
  .fleece-hero { gap: 32px; }
  /* the longer headline line is about five ems wide: 7.8vw keeps it inside its column down to 600px */
  .fleece-hero h1 { font-size: 7.8vw; margin-bottom: 22px; }
  .fleece-lead { font-size: 18px; }
  .fleece-lead-more { font-size: 15px; margin-bottom: 22px; }
  .fleece-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; margin: 44px 0 52px; }
  .fleece-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 34px; }
  .fleece-who-list { grid-template-columns: 1fr; }
  .fleece-who-list li:nth-last-child(2) { border-bottom: 0; }
  .fleece-delivery-facts { grid-template-columns: 1fr; gap: 26px; }
  .fleece-cta { flex-direction: column; align-items: flex-start; }
}
/* a short, wide window (a phone on its side): the index scrolls with the page */
@media (max-height: 480px) and (min-width: 601px) {
  .fleece-nav { position: static; }
}
@media (max-width: 600px) {
  .fleece-layout { padding: 12px 16px 48px; }
  .fleece-hero { display: block; padding-top: 10px; }
  .fleece-note { margin-bottom: 18px; }
  .fleece-hero h1 { font-size: clamp(46px, 16.2vw, 76px); margin-bottom: 22px; }
  .fleece-lead { font-size: 18px; line-height: 1.65; }
  .fleece-lead-more { font-size: 15px; margin-bottom: 24px; }
  .fleece-actions { gap: 6px 22px; }
  .service-fleece-page .fleece-actions .submit { width: 100%; }
  .fleece-lineup { margin-top: 26px; }

  .fleece-specs { gap: 26px 20px; padding: 24px 0 0; margin: 34px 0 30px; }
  .fleece-specs strong { font-size: 34px; }
  .fleece-specs dd > span { font-size: 13px; margin-top: 8px; }

  .fleece-grid { display: block; }
  .fleece-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 20px; padding: 0 0 12px; border-top: 0; }
  .fleece-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 13px; text-decoration: underline; }
  /* the reading marker belongs to the side index; here the links are a plain row */
  .fleece-nav .motion-spy { display: none; }
  .fleece-nav a[aria-current="location"] { color: inherit; }

  .fleece-section { scroll-margin-top: 84px; padding: 28px 0 46px; }
  .fleece-section h2 { font-size: 44px; margin-bottom: 14px; }
  .fleece-section-lead { font-size: 16px; }
  .fleece-section-more { font-size: 15px; }

  .fleece-who-list { margin-top: 22px; }
  .fleece-who-list li { gap: 14px; padding: 17px 0; font-size: 17px; }

  .fleece-model-list { gap: 12px; margin-top: 24px; }
  .fleece-model-text { padding: 12px 12px 16px; }
  .fleece-model h3 { font-size: 15px; }
  .fleece-model p { font-size: 13px; }
  .fleece-models-note { font-size: 13px; }

  .fleece-embroidery { gap: 26px; }
  .fleece-embroidery-art { max-width: none; grid-template-columns: 54% minmax(0, 1fr); }

  .fleece-order-grid { margin-top: 18px; gap: 24px; }
  .fleece-steps li { gap: 16px; }
  .fleece-steps p { font-size: 17px; }
  .fleece-order-note { padding: 22px 20px 16px; }
  .fleece-order-note p { font-size: 15px; }

  .fleece-delivery-facts { grid-template-columns: 1fr; gap: 24px; margin-top: 18px; }
  .fleece-pickup { grid-template-columns: 1fr; padding: 22px 20px; margin-top: 28px; }
  .fleece-pickup-art { display: none; }
  .fleece-pickup p { font-size: 15px; }

  .fleece-faq summary { padding: 18px 0; font-size: 16px; }
  .fleece-faq details p { font-size: 15px; }

  .fleece-cta { margin-top: 44px; padding: 28px 20px; gap: 22px; }
  .fleece-cta h2 { font-size: 46px; }
  .fleece-cta p { font-size: 16px; }
  .fleece-cta-actions { width: 100%; gap: 6px 22px; }
  .service-fleece-page .fleece-cta-actions .submit { width: 100%; }
}
@media (max-width: 360px) {
  .fleece-specs strong { font-size: 30px; }
  .fleece-section h2 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .fleece-model-photo img { transition: none; }
}