/* סוגי בדים: a guide on the information-page shell (shipping / about): same paper, hairlines,
   display headlines and blue. The page's own device is the fabric label: every composition the
   text states is drawn as a bar split by share (main fibre in ink, the stretch fibre in thread
   blue), under the shop's real photo of that product.
   policy-layout / policy-desktop-nav / policy-content are the hooks site-motion.css/js already
   use (title rise, side-index marker, section reveal, heading flash, accordion). */
.fabrics-page{
  /* The shop's card colour. The shop's "card" photos are shot on exactly this ground, and every
     white-ground photo is multiplied onto it, so all tiles on the page are one colour. */
  --fab-tile:color-mix(in srgb,var(--paper-background) 97%,var(--paper-foreground));
  --fab-band:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background));
}
.fab-layout{max-width:1240px;width:100%;min-width:0;margin:auto;padding:24px 40px 65px}
.fab-layout :focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

/* ── Hero: headline at the reading start, lead at the end (the shipping page's heading) ── */
.fab-hero{display:flex;align-items:end;justify-content:space-between;gap:60px;padding:34px 0 46px}
.fab-kicker{font-size:13px;color:var(--color-soft-foreground);margin:0 0 18px}
.fab-hero h1{font:700 clamp(64px,6.7vw,98px)/.94 var(--f-display);margin:0}
/* the headline keeps its three lines; the lead is the column that gives way */
.fab-hero-title{flex:none}
.fab-hero-lead{flex:0 1 500px;min-width:0;padding-bottom:4px}
.fab-hero-lead p{font-size:15.5px;line-height:1.8;margin:0;color:var(--color-soft-foreground)}
.fab-hero-lead .fab-lead{font-size:21px;line-height:1.6;margin:0 0 14px;color:var(--color-foreground)}

/* ── Photo tiles ── */
/* Every tile takes its shape from aspect-ratio and the photo is placed inside it with static
   box offsets, so the tile never depends on a percentage height resolving. */
.fab-tile{display:block;position:relative;overflow:hidden;border-radius:12px;background:var(--fab-tile)}
.fab-tile img{display:block;position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;mix-blend-mode:multiply;transition:transform .35s var(--ease-out)}
/* the shop's card photos already sit on the tile colour */
.fab-tile--card img{mix-blend-mode:normal}
/* a studio ground a little under white (240-252) would multiply into a faint rectangle;
   the lift clips it to white and leaves the black garment alone */
.fab-tile--lift img{filter:brightness(1.07)}
@media(hover:hover){a.fab-tile:hover img,.fab-four a:hover .fab-tile img{transform:scale(1.035)}}

/* ── The four names, side by side ── */
.fab-four{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0}
.fab-four li{min-width:0}
.fab-four a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;color:inherit;text-decoration:none}
.fab-four-photo{grid-column:1/-1;aspect-ratio:4/5;margin-bottom:18px}
.fab-num{flex:none;font-family:'Anton SC',sans-serif;font-size:19px;line-height:1;color:var(--color-primary);direction:ltr}
.fab-four strong{font:700 48px/1 var(--f-display)}
.fab-four small{grid-column:1/-1;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--color-soft-foreground)}
.fab-four a:hover strong{color:var(--color-primary)}
/* the rib tank is enlarged to the garment itself, from the neckline to the hem
   (square source, the tile shows x 24.5%-71%, y 26%-84%) */
.fab-four-photo--rib img{top:-44.7%;left:-52.7%;width:215%;height:auto}
/* the tile is a hair wider than this photo: the trim comes off above the waistband, not the shoes */
.fab-four-photo--tights img{object-position:50% 100%}

.fab-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px 60px;align-items:baseline;margin:44px 0 0;padding:22px 0;border-block:1px solid var(--color-rule)}
.fab-note p{margin:0;font-size:17px;line-height:1.6}
.fab-note p+p{font-size:15px;line-height:1.75;color:var(--color-soft-foreground)}

/* ── Side index + content ── */
.fab-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:65px}
.fab-nav{display:flex;flex-direction:column;align-items:start;gap:2px;position:sticky;top:100px;align-self:start;padding-top:40px}
.fab-nav a{display:block;padding:10px 0;font-size:15px;line-height:1.5;color:inherit;text-decoration:none}
.fab-nav a:hover{color:var(--color-primary);text-decoration:underline;text-underline-offset:4px}
.fab-content{min-width:0;font-size:16px;line-height:1.85}
.fab-content a{color:var(--color-primary);text-underline-offset:4px}
.fab-content p{margin:0 0 16px}
.fab-section{scroll-margin-top:105px;padding:42px 0 50px;border-top:1px solid var(--color-rule)}
.fab-section--first{border-top:0;padding-top:38px}
.fab-section:focus{outline:none}

/* Section head: the fabric's name is the headline, the rest of the heading sits beside it */
.fab-head{display:flex;align-items:baseline;gap:16px;margin:0 0 20px}
.fab-head h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0;font-weight:400}
.fab-name{font:700 62px/1 var(--f-display)}
.fab-sub{font-size:21px;line-height:1.4;color:var(--color-soft-foreground)}
.fab-colon{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.fab-def{font-size:20px;line-height:1.65;max-width:690px}
.fab-content .fab-def{margin-bottom:26px}
.fab-text p,.fab-body{max-width:640px;color:var(--color-muted-foreground)}
.fab-content .fab-body{max-width:690px;margin-bottom:28px}
.fab-content .fab-text .fab-def{color:var(--color-foreground);margin-bottom:20px}
/* Secular One has one weight: emphasis is a sand marker line, never a synthesized bold */
.fab-content strong{font-weight:400;color:var(--color-foreground);background:linear-gradient(to top,var(--color-rule-faint) 42%,transparent 42%)}
.fab-content .fab-more{font-size:15.5px;color:var(--color-foreground);margin-bottom:0}

.fab-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;align-items:start}
.fab-figure{margin:0;min-width:0}
.fab-figure figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--color-soft-foreground)}
.fab-tag{display:block;font-size:16px;color:var(--color-foreground);margin-bottom:2px}
.fab-tile--square{aspect-ratio:1}
.fab-tile--square img{object-fit:contain}

/* Example cards: photo, name, label, and the sentence about that product */
.fab-cards{display:grid;gap:26px;margin:4px 0 28px}
.fab-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fab-card{margin:0;min-width:0}
.fab-card .fab-tile{aspect-ratio:4/5;margin-bottom:16px}
/* 04: all three shop photos are square, so they are shown whole */
.fab-cards--square .fab-tile{aspect-ratio:1}
.fab-card h3{font-size:19px;font-weight:400;line-height:1.35;margin:0 0 10px}
.fab-content .fab-card p{font-size:14.5px;line-height:1.75;margin:0;color:var(--color-muted-foreground)}
/* The knit close up: the product photo at full size, moved until the tile holds only the
   neckline band and the ribs under it. Static box offsets (nothing here is animated).
   Source 1707x2560, the tile shows x 700-1060, y 760-1210. */
.fab-macro--rib img{top:-168.9%;left:-194.5%;width:474.2%;height:auto}

/* The fabric label */
.fab-comp{margin:0 0 12px}
.fab-content .fab-comp-labels{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px;font-size:14px;line-height:1.3;color:var(--color-foreground)}
.fab-comp-labels bdi{font:400 22px/1 'Anton SC',sans-serif;margin-inline-end:3px}
.fab-comp-labels .is-stretch{color:var(--color-primary)}
.fab-comp-bar{display:flex;gap:3px;height:8px}
.fab-comp-bar i{display:block;flex:0 1 0;min-width:0;border-radius:2px;background:var(--color-foreground)}
.fab-comp-bar .is-stretch{background:var(--color-primary)}
/* 03: the one large label. Its top edge is the site's running stitch. */
.fab-comp--feature{margin:28px 0 26px;padding-top:20px;max-width:640px;background:repeating-linear-gradient(to left,var(--color-primary) 0 5px,transparent 5px 9px) top/100% 1.5px no-repeat}
.fab-content .fab-comp-title{font-size:13.5px;line-height:1.4;margin:0 0 14px;color:var(--color-soft-foreground)}
.fab-comp--feature .fab-comp-labels{font-size:17px;margin-bottom:12px}
.fab-comp--feature .fab-comp-labels bdi{font-size:52px;margin-inline-end:8px}
.fab-comp--feature .fab-comp-bar{height:14px;gap:4px}
.fab-comp--feature .fab-comp-bar i{border-radius:3px}

.fab-split--lycra{grid-template-columns:minmax(0,1fr) 380px;gap:48px}
.fab-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fab-duo .fab-tile{aspect-ratio:4/5}
/* the shop card leaves a wide margin around the tights; enlarged to the garment, waistband to hem */
.fab-duo .fab-tile--zoom img{top:0;left:-28%;width:156%;height:auto}

/* ── Which fabric: need at the start, answer at the end ── */
.fab-choose{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--color-rule)}
.fab-choose li{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:6px 40px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--color-rule)}
/* the next section's own rule closes the list */
.fab-choose li:last-child{border-bottom:0;padding-bottom:0}
.fab-choose strong{font-size:19px;line-height:1.5;background:none}
.fab-choose span{font-size:16px;line-height:1.75;color:var(--color-muted-foreground)}

/* ── Branding + the factory shop ── */
.fab-split--brand{align-items:center}
/* the theme's own cut-out of the embroidered cap, set inside the tile with a margin */
.fab-tile--object{aspect-ratio:16/11}
.fab-tile--object img{top:11%;left:11%;width:78%;height:78%;object-fit:contain;mix-blend-mode:normal}
.fab-links{display:flex;flex-wrap:wrap;gap:0 30px;margin:4px 0 0}
.fab-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px}
/* the shipping page's pick-up band */
.fab-visit{display:grid;grid-template-columns:minmax(0,1fr) 145px;align-items:center;gap:30px;margin:40px 0 0;padding:30px;border-radius:12px;background:var(--fab-band)}
.fab-visit h3{font-size:24px;font-weight:400;line-height:1.35;margin:0 0 10px}
.fab-content .fab-visit p{font-size:15.5px;line-height:1.75;max-width:520px;margin:0 0 20px}
.fab-visit-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fabrics-page .fab-visit .submit{width:auto;min-height:48px;margin:0;padding:13px 24px;gap:18px;font-size:15px;text-decoration:none}
.fab-visit-art{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--color-primary);border-radius:7px;padding:18px 12px;color:var(--color-primary);transform:rotate(-4deg)}
.fab-visit-art span{font-size:21px;line-height:1.5}
.fab-visit-art strong{font:400 90px/1.15 'Anton SC',sans-serif;background:none;color:inherit}
.fab-visit-art small{font-size:16px;line-height:1.5}

/* ── Questions: the shipping page's accordion ── */
.fab-faq details{border-bottom:1px solid var(--color-rule)}
.fab-faq details:first-of-type{border-top:1px solid var(--color-rule)}
.fab-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0;font-size:17px;line-height:1.5}
.fab-faq summary::-webkit-details-marker{display:none}
.fab-faq summary::after{content:'+';flex:none;inline-size:18px;text-align:center;color:var(--color-primary);font:25px/1 sans-serif}
.fab-faq details[open] summary::after{content:'−'}
/* padding, not margin, so the opening height animation has no jump at the end */
.fab-content .fab-faq details p{margin:0;padding-bottom:22px;font-size:15px;line-height:1.8;max-width:620px;color:var(--color-muted-foreground)}

/* ── Closing band, full width under the two columns (outside .policy-content, so the scroll
   reveal never holds it back) ── */
.fab-cta{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 60px;align-items:center;margin-top:14px;padding:40px 44px;border-radius:12px;background:var(--fab-band)}
.fab-cta h2{font:700 clamp(42px,4vw,58px)/1.02 var(--f-display);margin:0 0 14px}
.fab-cta-text>p{font-size:16px;line-height:1.7;margin:0 0 22px;color:var(--color-muted-foreground)}
.fab-cta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fabrics-page .fab-cta .submit{width:auto;min-height:50px;margin:0;padding:14px 30px;font-size:15px;text-decoration:none}
.fab-cta-phone{font-size:14px;color:var(--color-primary)}
.fab-cats{display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.fab-cats p{flex-basis:100%;font-size:13px;margin:0 0 4px;color:var(--color-soft-foreground)}
.fab-cats a{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border:1px solid var(--color-rule-strong);border-radius:999px;font-size:14px;color:inherit;text-decoration:none;transition:border-color var(--motion-feedback) var(--ease-out),color var(--motion-feedback) var(--ease-out)}
.fab-cats a:hover{border-color:var(--color-primary);color:var(--color-primary)}

@media(max-width:1000px){
  .fab-layout{padding:20px 28px 55px}
  .fab-hero{gap:36px}
  .fab-hero h1{font-size:clamp(56px,7.4vw,70px)}
  .fab-hero-lead .fab-lead{font-size:19px}
  .fab-four{gap:16px}
  .fab-four strong{font-size:40px}
  .fab-grid{grid-template-columns:150px minmax(0,1fr);gap:32px}
  .fab-nav a{font-size:14px}
  .fab-name{font-size:54px}
  .fab-split{grid-template-columns:minmax(0,1fr) 240px;gap:30px}
  .fab-split--lycra{grid-template-columns:1fr}
  .fab-duo{max-width:420px}
  .fab-cards{gap:18px}
  .fab-choose li{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:6px 24px}
  .fab-cta{grid-template-columns:1fr;gap:26px;padding:28px}
}
/* Tablet: the side index becomes a row of links, so the photos keep their width */
@media(max-width:900px){
  .fab-grid{display:block}
  .fab-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:0 22px;padding:10px 0 12px;border-bottom:1px solid var(--color-rule)}
  .fab-nav a{display:flex;align-items:center;min-height:44px;padding:0;text-decoration:underline;text-underline-offset:4px}
  .fab-nav .motion-spy{display:none}
  .fab-split{grid-template-columns:minmax(0,1fr) 280px;gap:36px}
}
@media(max-width:800px){
  .fab-visit{grid-template-columns:1fr;padding:24px}
  .fab-visit-art{display:none}
}
@media(max-width:600px){
  .fab-layout{padding:14px 16px 44px}
  .fab-hero{display:block;padding:20px 0 30px}
  .fab-kicker{font-size:12px;margin-bottom:14px}
  /* its own phone size: three short lines, never tied to the body text */
  .fab-hero h1{font-size:clamp(50px,15vw,62px);line-height:.96;margin-bottom:22px}
  .fab-hero-lead{max-width:none;padding:0}
  .fab-hero-lead .fab-lead{font-size:18px;line-height:1.65;margin-bottom:12px}
  .fab-hero-lead p{font-size:15px;line-height:1.75}
  .fab-four{grid-template-columns:1fr 1fr;gap:22px 12px}
  .fab-four a{column-gap:9px}
  .fab-four-photo{margin-bottom:12px;border-radius:10px}
  .fab-num{font-size:16px}
  .fab-four strong{font-size:36px}
  .fab-four small{font-size:13px;margin-top:5px}
  .fab-note{grid-template-columns:1fr;margin-top:30px;padding:18px 0}
  .fab-note p{font-size:16px}
  .fab-note p+p{font-size:14.5px}
  .fab-nav{gap:0 18px;padding:8px 0 10px}
  .fab-nav a{font-size:13px}
  .fab-content{font-size:15px;line-height:1.8}
  .fab-section{scroll-margin-top:84px;padding:30px 0 34px}
  .fab-section--first{padding-top:26px}
  .fab-head{gap:11px;margin-bottom:14px}
  .fab-head h2{gap:2px 12px}
  .fab-name{font-size:46px}
  .fab-sub{font-size:17px}
  .fab-def{font-size:17.5px;line-height:1.7}
  .fab-content .fab-def{margin-bottom:20px}
  .fab-content .fab-body{margin-bottom:22px}
  .fab-content .fab-more{font-size:15px}
  .fab-split,.fab-split--lycra{grid-template-columns:1fr;gap:22px}
  .fab-tile--square{aspect-ratio:4/3}
  .fab-tile{border-radius:10px}
  /* cards become rows: photo at the start, the label and the sentence beside it */
  .fab-cards--3{grid-template-columns:1fr;gap:0;margin:0 0 22px;border-top:1px solid var(--color-rule)}
  .fab-card{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:16px;padding:16px 0;border-bottom:1px solid var(--color-rule)}
  .fab-card .fab-tile{grid-area:1/1/-1/2;margin:0}
  .fab-card h3{grid-area:2/2;font-size:17px;margin-bottom:8px}
  .fab-card .fab-comp{grid-area:3/2}
  .fab-card .fab-comp:last-child{margin-bottom:0}
  .fab-card>p,.fab-card figcaption>p{grid-area:4/2}
  .fab-content .fab-card p{font-size:14px;line-height:1.7}
  .fab-card--macro figcaption{display:contents}
  .fab-comp-labels bdi{font-size:20px}
  .fab-comp--feature{margin:22px 0 22px;padding-top:18px}
  .fab-comp--feature .fab-comp-labels{font-size:15px}
  .fab-comp--feature .fab-comp-labels bdi{font-size:40px;margin-inline-end:6px}
  .fab-duo{max-width:none;gap:12px}
  .fab-choose li{display:block;padding:16px 0}
  .fab-choose strong{display:block;font-size:17px;margin-bottom:4px}
  .fab-choose span{font-size:15px}
  .fab-tile--object{aspect-ratio:16/9}
  .fab-tile--object img{top:12%;left:19%;width:62%;height:76%}
  .fab-visit{padding:22px;margin-top:28px}
  .fab-visit h3{font-size:21px}
  .fab-content .fab-visit p{font-size:15px}
  .fabrics-page .fab-visit .submit{font-size:14px;padding:12px 20px}
  .fab-faq summary{font-size:16px;padding:17px 0;gap:14px}
  .fab-content .fab-faq details p{font-size:14.5px;padding-bottom:18px}
  .fab-cta{padding:24px 20px;gap:22px;margin-top:20px}
  .fab-cta h2{font-size:44px}
  .fab-cta-text>p{font-size:15px;margin-bottom:18px}
  .fabrics-page .fab-cta .submit{width:100%;font-size:14px;padding:13px 20px}
  .fab-cta-actions{gap:12px}
  .fab-cats a{font-size:13px;padding:7px 14px;min-height:42px}
}
@media(prefers-reduced-motion:reduce){.fab-tile img,.fab-cats a{transition:none}a.fab-tile:hover img,.fab-four a:hover .fab-tile img{transform:none}}

/* English retains the composition with a readable Latin type scale. */
html[lang^="en"] .fab-hero h1{font-size:clamp(44px,5vw,72px);line-height:1.06}
html[lang^="en"] .fab-name{font-size:48px;line-height:1.08}
html[lang^="en"] .fab-four strong{font-size:36px}
html[lang^="en"] .fab-cta h2{font-size:clamp(32px,3.2vw,46px);line-height:1.12}
html[lang^="en"] .fab-links [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}