/* נעלי בטיחות S1, S2, S3: a guide on the information-page shell (full-width display title, side index,
   hairline sections, sand panel, +/− accordions, blue pill). The photos are the shop's own product photos.
   Every one was shot on the same flat ground (#F0ECE3), so --shoe-tile is mixed to that colour and the photos
   are blended into it (darken): a shoe sits in its tile with no visible frame, and three can share one tile.
   The class names information-layout / policy-layout / policy-desktop-nav / policy-content / clients-cta are
   the hooks site-motion.css/js already use (title rise, side-index marker, section reveal, heading flash). */
.shoe-guide{--shoe-tile:color-mix(in srgb,var(--color-sand-300) 11%,var(--paper-background));--shoe-panel:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background));--shoe-brick:color-mix(in srgb,var(--color-sand-300) 36%,var(--paper-background));max-width:1240px;width:100%;min-width:0;margin:0 auto;padding:24px 40px 65px}
.shoe-guide :focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}
/* Secular One ships one weight: emphasis is never a synthesized bold. */
.shoe-guide strong,.shoe-guide b{font-weight:400}
/* A Hebrew prefix and its Latin code (ב-S1, ו-S3) stay on one line, and so does a standard's full name. */
.shoe-nw,.shoe-guide bdi{white-space:nowrap}
.shoe-kicker{font-size:13px;color:var(--color-soft-foreground);margin:0 0 22px}
.shoe-kicker a{display:inline-block;padding:10px 0;margin:-10px 0;color:inherit;text-underline-offset:4px}

/* Hero: the title runs the full width. Under it one shoe of each grade, side by side in one tile, each under
   its own mark; then the lead on the reading side and the way to the shop on the other. */
.shoe-hero{padding:14px 0 58px}
.shoe-hero h1{font:700 clamp(60px,6.6vw,96px)/.98 var(--f-display);margin:0 0 38px}
.shoe-lineup{margin:0 0 40px}
/* The one row is pinned to the tile's height (minmax(0,1fr)); left to auto it would grow to the photos' own size. */
.shoe-lineup ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);height:340px;overflow:hidden;border-radius:6px;background:var(--shoe-tile);isolation:isolate}
.shoe-lineup li{position:relative;min-width:0}
.shoe-lineup li+li{border-inline-start:1px solid var(--color-rule-faint)}
.shoe-lineup a{display:block;height:100%;color:inherit;text-decoration:none}
.shoe-lineup img{display:block;width:auto;height:100%;max-width:100%;aspect-ratio:1;margin:0 auto;object-fit:contain;mix-blend-mode:darken}
/* The three photos leave different margins under the sole; two are lowered so all three stand on one line.
   Static offsets, nothing here is animated. */
.shoe-lineup li:nth-child(1) img{transform:translateY(9.3%)}
.shoe-lineup li:nth-child(2) img{transform:translateY(5.8%)}
/* The mark sits in the empty corner above the toe, like a tag on a shelf. */
.shoe-lineup-label{position:absolute;top:26px;inset-inline-start:30px;display:flex;flex-direction:column;gap:8px}
.shoe-lineup-label b{font:400 58px/.9 'Anton SC',sans-serif;color:var(--color-primary)}
.shoe-lineup-label small{font-size:13px;line-height:1.4;color:var(--color-soft-foreground);transition:color var(--motion-feedback) var(--ease-out)}
.shoe-lineup-label small::after{content:' ←';color:var(--color-primary);white-space:nowrap}
.shoe-lineup figcaption{font-size:12px;color:var(--color-soft-foreground);margin:12px 0 0}
.shoe-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.shoe-intro p{margin:0}
.shoe-lead{font-size:23px;line-height:1.6;max-width:540px}
.shoe-intro-more p{font-size:16px;line-height:1.8;color:var(--color-muted-foreground);max-width:520px;padding-top:5px}
.shoe-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 28px;margin-top:26px}
.shoe-guide .shoe-cta{display:inline-flex;width:auto;min-height:54px;margin:0;padding:15px 28px;font-size:16px;text-decoration:none;flex-shrink:0}
.shoe-text-link{display:inline-block;min-height:44px;padding-block:10px;color:var(--color-primary);text-underline-offset:5px;font-size:15px}

/* Side index + content, as on the shipping page. The index carries the legal pages' reading marker. */
.shoe-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:65px;border-top:1px solid var(--color-rule)}
.shoe-aside{position:sticky;top:100px;align-self:start;padding-top:14px}
.shoe-nav{display:flex;flex-direction:column;align-items:start;gap:8px}
.shoe-nav a{padding:11px 0;text-decoration:none;font-size:15px;transition:color var(--motion-feedback) var(--ease-out)}
.shoe-nav a:hover{color:var(--color-primary)}
.shoe-content{min-width:0}
.shoe-section{scroll-margin-top:105px;padding:34px 0 54px}
.shoe-section+.shoe-section{border-top:1px solid var(--color-rule);padding-top:46px}
.shoe-section:focus{outline:none}
.shoe-section h2{font:700 48px/1.05 var(--f-display);margin:0 0 18px}
.shoe-section-lead{font-size:18px;line-height:1.75;max-width:660px;margin:0}
.shoe-content p a{color:var(--color-primary);text-underline-offset:5px}

/* What the grades share: three stacks, bottoms on one line. Each grade stands on the grades it includes,
   so the stack grows by one brick per grade and the three marks climb like steps.
   Five rows: brick, brick, text, brick, brick. Every grade's block spans three of them and all three spans
   contain the text row, so the blocks are the same height at any width and each step is exactly one brick. */
.shoe-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:46px 46px auto 46px 46px;gap:6px 14px;margin:34px 0 0}
.shoe-step{min-width:0;padding:24px 24px 26px;border-radius:10px;background:var(--shoe-panel)}
.shoe-step--1{grid-column:1;grid-row:3/6}
.shoe-step--2{grid-column:2;grid-row:2/5}
.shoe-step--3{grid-column:3;grid-row:1/4}
.shoe-step h3{font:400 76px/.9 'Anton SC',sans-serif;color:var(--color-primary);margin:0 0 20px}
.shoe-step p{font-size:16px;line-height:1.7;margin:0}
.shoe-step-plus{display:block;font-size:13px;line-height:1.5;color:var(--color-soft-foreground);margin-bottom:5px}
.shoe-step-base{display:flex;flex-direction:column;gap:6px;min-width:0}
.shoe-step-base--2{grid-column:2;grid-row:5}
.shoe-step-base--3{grid-column:3;grid-row:4/6}
.shoe-step-base span{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 24px;border-radius:8px;background:var(--shoe-brick);font:400 21px/1 'Anton SC',sans-serif;color:var(--color-soft-foreground)}
.shoe-step-base span::after{content:'';width:6px;height:11px;margin-inline-end:4px;border:solid var(--color-primary);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.shoe-sum{margin:30px 0 0;padding-inline-start:18px;border-inline-start:2px solid var(--color-primary);font-size:17px;line-height:1.75}

/* Which grade for which work: one row per grade. The grade's own mark opens the sentence,
   the model from the shop follows in the quieter line, and its photo closes the row. */
.shoe-rule{font-size:22px;line-height:1.6;margin:0}
.shoe-rule span{color:var(--color-primary)}
.shoe-fits{list-style:none;margin:30px 0 0;padding:0}
.shoe-fit{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center;padding:30px 0;border-top:1px solid var(--color-rule)}
.shoe-fit:last-child{padding-bottom:0}
.shoe-fit-where{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start;font-size:19px;line-height:1.6;margin:0 0 10px}
.shoe-fit-where strong{font:400 64px/.95 'Anton SC',sans-serif;color:var(--color-primary);margin-top:3px}
.shoe-fit-model{font-size:15.5px;line-height:1.8;color:var(--color-muted-foreground);margin:0;padding-inline-start:104px}
.shoe-fit-media{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.shoe-tile{display:block;min-width:0;color:inherit;text-decoration:none}
.shoe-tile-photo{display:block;height:204px;overflow:hidden;border-radius:6px;background:var(--shoe-tile);isolation:isolate}
/* Enlarged inside the tile: the photo's own margin is cut away and the shoe keeps the same air on every side. */
.shoe-tile-photo img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;transform:translateY(-3%) scale(1.06)}
.shoe-tile--wide .shoe-tile-photo img{transform:translateY(-5%) scale(1.42)}
.shoe-tile-name{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px;font-size:14px;line-height:1.45;transition:color var(--motion-feedback) var(--ease-out)}
.shoe-tile-name::after{content:'←';flex:none;color:var(--color-primary);font-size:15px;line-height:1;transition:transform var(--motion-lift) var(--ease-out)}

/* What else to check: four short points, and beside them the boot the second point names. */
.shoe-check-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:48px;margin-top:10px}
.shoe-checks{list-style:none;counter-reset:shoe-check;margin:0;padding:0;border-top:1px solid var(--color-rule)}
.shoe-checks li{counter-increment:shoe-check;display:grid;grid-template-columns:46px minmax(0,1fr);padding:19px 0 20px;border-bottom:1px solid var(--color-rule)}
.shoe-checks li::before{content:counter(shoe-check,decimal-leading-zero);grid-row:1/span 2;font:400 19px/1.45 'Anton SC',sans-serif;color:var(--color-primary);padding-top:1px}
.shoe-checks h3{grid-column:2;font-size:19px;font-weight:400;line-height:1.45;margin:0 0 4px}
.shoe-checks p{grid-column:2;font-size:15.5px;line-height:1.75;color:var(--color-muted-foreground);margin:0}
.shoe-boot{display:flex;margin:0}
.shoe-boot .shoe-tile{display:flex;flex-direction:column;flex:1}
.shoe-boot .shoe-tile-photo{flex:1;height:auto;min-height:300px}
.shoe-boot .shoe-tile-photo img{transform:scale(1.5)}

/* Where to see and order: the shipping page's sand panel and its address stamp. */
.shoe-order-panel{display:grid;grid-template-columns:minmax(0,1fr) 145px;align-items:start;gap:24px 52px;padding:32px 34px 32px 38px;margin-top:28px;border-radius:12px;background:var(--shoe-panel)}
.shoe-order-facts{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.shoe-order-facts h3{font-size:18px;font-weight:400;line-height:1.4;margin:0 0 8px}
.shoe-order-facts p{font-size:15px;line-height:1.75;color:var(--color-muted-foreground);margin:0}
.shoe-address-art{grid-column:2;grid-row:1/span 2;align-self:center;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)}
.shoe-address-art span{font-size:21px}
.shoe-address-art strong{font:400 90px/1.15 'Anton SC',sans-serif}
.shoe-address-art small{font-size:16px}
.shoe-order-ask{grid-column:1;margin:0;padding-top:22px;border-top:1px solid var(--color-rule);font-size:16px;line-height:1.75}

/* Questions: the shipping page's accordion. */
.shoe-faq{padding-bottom:40px}
.shoe-faq h2{margin-bottom:22px}
.shoe-faq details{border-bottom:1px solid var(--color-rule)}
.shoe-faq details:first-of-type{border-top:1px solid var(--color-rule)}
.shoe-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}
.shoe-faq summary::-webkit-details-marker{display:none}
.shoe-faq summary::after{content:'+';flex:none;inline-size:18px;text-align:center;color:var(--color-primary);font:25px/1 sans-serif}
.shoe-faq details[open] summary::after{content:'−'}
.shoe-faq details p{margin:0;padding:0 0 22px;font-size:15px;line-height:1.8;max-width:620px;color:var(--color-muted-foreground)}

/* The close: the way to the shop, and the five models the guide names. */
.shoe-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;align-items:end;margin-top:10px;padding:44px 48px;border-radius:12px;background:var(--shoe-panel)}
.shoe-close h2{font:700 clamp(46px,4.6vw,62px)/1.02 var(--f-display);margin:0 0 14px}
.shoe-close-text p{font-size:16px;line-height:1.75;color:var(--color-muted-foreground);margin:0;max-width:420px}
.shoe-close-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;margin-top:28px}
.shoe-close-phone{display:inline-block;padding-block:10px;font-size:15px;color:var(--color-primary);text-underline-offset:5px}
.shoe-models p{font-size:13px;color:var(--color-soft-foreground);margin:0 0 10px}
.shoe-models ul{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--color-rule)}
.shoe-models a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--color-rule);font-size:15.5px;line-height:1.5;text-decoration:none;transition:color var(--motion-feedback) var(--ease-out)}
.shoe-models a::after{content:'←';flex:none;color:var(--color-primary);font-size:15px;line-height:1;transition:transform var(--motion-lift) var(--ease-out)}

@media(hover:hover){
  .shoe-lineup a:hover small,.shoe-tile:hover .shoe-tile-name,.shoe-models a:hover{color:var(--color-primary)}
  .shoe-tile:hover .shoe-tile-name::after,.shoe-models a:hover::after{transform:translateX(-4px)}
}
@media(max-height:700px) and (min-width:901px){.shoe-aside{position:static}}
@media(max-width:1100px){
  .shoe-intro{gap:44px}
  .shoe-lineup ul{height:clamp(236px,27.5vw,340px)}
  .shoe-lineup-label{top:20px;inset-inline-start:22px;gap:6px}
  .shoe-lineup-label b{font-size:clamp(40px,4.6vw,58px)}
  .shoe-step{padding:22px 20px 24px}
  .shoe-step-base span{padding:0 20px}
  .shoe-fit{grid-template-columns:minmax(0,1fr) 300px;gap:36px}
  .shoe-fit-where{grid-template-columns:92px minmax(0,1fr)}
  .shoe-fit-model{padding-inline-start:92px}
  .shoe-check-grid{grid-template-columns:minmax(0,1fr) 210px;gap:36px}
  .shoe-close{gap:36px 48px;padding:38px 36px}
}
/* Tablet: the index leaves the side and runs as one line of links above the content. */
@media(max-width:900px){
  .shoe-guide{padding-inline:28px}
  .shoe-hero h1{font-size:clamp(46px,8.2vw,72px);margin-bottom:30px}
  .shoe-lineup{margin-bottom:30px}
  .shoe-lineup-label small::after{content:none}
  .shoe-intro{grid-template-columns:1fr;gap:16px}
  .shoe-lead,.shoe-intro-more p{max-width:640px}
  .shoe-grid{display:block}
  .shoe-aside{position:static;padding:4px 0 6px}
  .shoe-nav{flex-direction:row;flex-wrap:wrap;gap:2px 22px}
  .shoe-nav a{display:flex;align-items:center;min-height:44px;padding:0;font-size:14px;text-decoration:underline;text-underline-offset:5px}
  .shoe-nav .motion-spy{display:none}
  .shoe-section:first-child{border-top:1px solid var(--color-rule)}
}
@media(max-width:760px){
  /* Three across in a narrow tile leaves no empty corner for the mark: it moves under its shoe. */
  .shoe-lineup ul{height:auto}
  .shoe-lineup a{padding:0 0 18px}
  .shoe-lineup img{width:100%;height:auto}
  .shoe-lineup-label{position:static;gap:5px;padding:2px 18px 0}
  .shoe-lineup-label b{font-size:40px}
  .shoe-lineup-label small::after{content:none}
  /* The photo moves under the text of its row. */
  .shoe-fit{grid-template-columns:1fr;gap:22px}
}
@media(max-width:600px){
  .shoe-guide{padding:16px 16px 48px}
  .shoe-kicker{font-size:12px;margin-bottom:16px}
  .shoe-hero{padding:4px 0 30px}
  .shoe-hero h1{font-size:clamp(38px,11.6vw,50px);line-height:1;margin-bottom:22px}
  .shoe-lineup{margin-bottom:24px}
  .shoe-lineup a{padding:0 0 14px}
  .shoe-lineup-label{padding:4px 12px 0}
  .shoe-lineup-label b{font-size:30px}
  .shoe-lineup-label small{font-size:11.5px}
  .shoe-lineup figcaption{margin-top:10px}
  .shoe-intro{gap:14px}
  .shoe-lead{font-size:19px;line-height:1.6}
  .shoe-intro-more p{font-size:15px;line-height:1.75;padding-top:0}
  .shoe-hero-actions{margin-top:22px}
  .shoe-guide .shoe-cta{width:100%;font-size:15px}
  .shoe-nav{gap:0 20px}
  .shoe-nav a{font-size:13px}
  .shoe-section{padding:28px 0 38px;scroll-margin-top:84px}
  .shoe-section+.shoe-section{padding-top:34px}
  .shoe-section h2{font-size:38px;margin-bottom:14px}
  .shoe-section-lead{font-size:16px;line-height:1.75}
  /* The three stacks become three rows; the bricks a grade stands on lie in one line under it. */
  .shoe-steps{display:block;margin-top:24px}
  .shoe-step{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:start;padding:20px 18px 20px}
  .shoe-step+.shoe-step,.shoe-step-base+.shoe-step{margin-top:12px}
  .shoe-step h3{font-size:54px;line-height:.95;margin:2px 0 0}
  .shoe-step p{font-size:15px}
  .shoe-step-base{flex-direction:row;margin-top:6px}
  .shoe-step-base span{flex:1;height:40px;padding:0 18px;font-size:18px}
  .shoe-sum{margin-top:24px;padding-inline-start:14px;font-size:15.5px}
  .shoe-rule{font-size:18px;line-height:1.65}
  .shoe-fits{margin-top:22px}
  .shoe-fit{grid-template-columns:1fr;gap:20px;padding:24px 0 26px}
  .shoe-fit-where{grid-template-columns:78px minmax(0,1fr);font-size:17px;margin-bottom:12px}
  .shoe-fit-where strong{font-size:54px;margin-top:2px}
  .shoe-fit-model{font-size:15px;line-height:1.75;padding-inline-start:0}
  .shoe-tile-photo{height:176px}
  .shoe-tile-name{font-size:13px}
  .shoe-check-grid{grid-template-columns:1fr;gap:22px;margin-top:6px}
  .shoe-checks li{grid-template-columns:38px minmax(0,1fr);padding:16px 0 17px}
  .shoe-checks li::before{font-size:17px}
  .shoe-checks h3{font-size:17px}
  .shoe-checks p{font-size:14.5px}
  .shoe-boot .shoe-tile-photo{min-height:0;height:220px;flex:none}
  .shoe-boot .shoe-tile-photo img{transform:scale(1.06)}
  .shoe-order-panel{grid-template-columns:1fr;gap:22px;padding:22px 20px;margin-top:22px}
  .shoe-order-facts{grid-template-columns:1fr;gap:20px}
  .shoe-order-facts h3{font-size:16px;margin-bottom:6px}
  .shoe-address-art{display:none}
  .shoe-order-ask{padding-top:20px;font-size:15px}
  .shoe-faq{padding-bottom:30px}
  .shoe-faq summary{font-size:16px;padding:18px 0}
  .shoe-faq details p{font-size:14px}
  .shoe-close{grid-template-columns:1fr;gap:30px;padding:26px 20px 24px;margin-top:4px}
  .shoe-close h2{font-size:40px}
  .shoe-close-text p{font-size:15px}
  .shoe-close-actions{margin-top:22px}
  .shoe-models a{font-size:14.5px;padding:13px 0}
}
@media(prefers-reduced-motion:reduce){.shoe-nav a,.shoe-lineup-label small,.shoe-tile-name,.shoe-tile-name::after,.shoe-models a,.shoe-models a::after{transition:none}}