/* מדריך: איך מודדים היקף מותניים וירכיים.
   Built on the information-page shell (shipping-preview): the same heading, side
   index, section rules and accordion. Class names site-motion.js already knows are
   reused on purpose and styled here only: .policy-desktop-nav gets the reading
   marker, .policy-content > section the scroll reveal, .policy-layout the heading
   flash on an index click. Nothing from the policy or shipping stylesheets is loaded. */
.guide-page{--guide-sand:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background));--guide-tile:var(--color-white)}
.information-layout{max-width:1240px;width:100%;margin:auto;padding:24px 40px 65px}
.information-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;padding:44px 0}
.information-heading h1{font:700 clamp(70px,7.2vw,108px)/.92 var(--f-display);margin:0}
.information-heading>div{max-width:470px;padding-bottom:10px}
.information-heading p{font-size:17px;line-height:1.7;margin:0;opacity:.75}
.information-heading .guide-kicker{font-size:14px;color:var(--color-primary);opacity:1;margin:0 0 14px}
.information-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:65px}
.guide-aside{position:sticky;top:100px;align-self:start}
.information-nav{display:flex;flex-direction:column;align-items:start;gap:6px;border-top:1px solid var(--color-rule);padding-top:16px}
.information-nav h2{font-size:16px;font-weight:400;margin:0 0 6px}
.information-nav a{padding:10px 0;text-decoration:none;font-size:15px}
.information-nav a:hover{color:var(--color-primary)}
.information-content{min-width:0}
.information-content section{scroll-margin-top:105px;border-top:1px solid var(--color-rule);padding:30px 0 46px}
.information-content h2{font-size:27px;font-weight:400;margin:0 0 18px}
.information-content p{font-size:16px;line-height:1.85;margin:0 0 16px;max-width:640px;color:var(--color-muted-foreground)}
.information-content p:last-child{margin-bottom:0}
.information-content a:not(.submit){color:var(--color-primary);text-underline-offset:4px}
.guide-number{display:inline-block;font:400 21px/1 'Anton SC',sans-serif;color:var(--color-primary);direction:ltr;font-variant-numeric:tabular-nums}

/* מה צריך: three items side by side, numbered like the steps on the story page. */
.guide-kit{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.guide-kit li{display:flex;flex-direction:column;gap:14px}
.guide-kit li+li{border-inline-start:1px solid var(--color-rule);padding-inline-start:36px}
.guide-kit p{font-size:15px;line-height:1.75;margin:0}

/* The two measurements: text beside a real product photo, mirrored for the second. */
.guide-step{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:30px 56px;align-items:start}
.guide-step--flip{grid-template-columns:400px minmax(0,1fr)}
.guide-step--flip .guide-step-text{order:2}
.guide-step-text{min-width:0}
/* The photos are the shop's own pictures on white, shown on a white tile exactly like
   a product card. The picture is wider than its tile and placed by hand: --zoom is
   how much wider, --cx the point of the picture (across) that sits in the middle,
   so the tile closes in on the part of the body the section is about. */
.guide-figure{margin:0}
.guide-photo{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:12px;background:var(--guide-tile)}
.guide-photo img{position:absolute;top:0;left:50%;display:block;width:calc(var(--zoom,1)*100%);max-width:none;height:auto;transform:translateX(calc(var(--cx,50%)*-1))}
.guide-figure figcaption{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.5;color:var(--color-soft-foreground);margin-top:12px}
.guide-figure figcaption::before{content:'';width:22px;height:1px;background:currentColor;flex:none}

/* "שימו לב": the caveat under the waist step, with the close-up that shows it. */
.guide-note{grid-column:1/-1;display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:28px;padding:16px;padding-inline-end:28px;border-radius:12px;background:var(--guide-sand)}
.guide-note img{display:block;width:132px;height:132px;object-fit:cover;object-position:30% 20%;border-radius:8px;background:var(--guide-tile)}
.information-content .guide-note p{font-size:15px;line-height:1.8;margin:0;max-width:640px;color:var(--color-foreground)}
.guide-note strong{font-weight:400;color:var(--color-primary)}
/* The short tip in the hips step: same voice, lighter weight. */
.information-content p.guide-tip{margin-top:22px;padding-inline-start:18px;border-inline-start:2px solid var(--color-primary);font-size:15px;line-height:1.8;color:var(--color-foreground)}

/* טעויות נפוצות: a numbered list on sand, two across; the last, longest one runs the full width. */
.guide-mistakes ol{list-style:none;margin:4px 0 0;padding:26px 32px 8px;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-radius:12px;background:var(--guide-sand)}
.guide-mistakes li{display:flex;align-items:flex-start;gap:18px;padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--color-rule);font-size:15px;line-height:1.75}
.guide-mistakes li:last-child{grid-column:1/-1;border-bottom:0;margin-bottom:0}
.guide-mistakes li:last-child>span:last-child{max-width:640px}
.guide-mistakes li .guide-number{flex:none;padding-top:5px}

/* בחירת מכנסיים: the four categories the text names, as real product photos. */
.guide-categories{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.guide-categories a{display:block;text-decoration:none;color:inherit}
.guide-categories a>span:first-child{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:12px;background:var(--guide-tile)}
.guide-categories img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--px,50%) 50%;transition:transform .35s var(--ease-out)}
.guide-categories a:hover img{transform:scale(1.03)}
.guide-categories a>span:last-child{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px 0;font-size:15px;line-height:1.4;color:var(--color-primary)}
.guide-categories b{font-weight:400;transition:transform var(--motion-lift) var(--ease-out)}
.guide-categories a:hover b{transform:translateX(-4px)}
.guide-categories a:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px;border-radius:12px}

/* צוות שלם: the text ends at the factory shop, so it carries the address plate
   from the shipping page (the address itself is in the questions below). */
.guide-team{display:grid;grid-template-columns:minmax(0,1fr) 155px;align-items:center;gap:56px}
.guide-team-text{min-width:0}
.guide-address{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-inline-end:10px;border:2px solid var(--color-primary);border-radius:7px;padding:18px 12px;color:var(--color-primary);transform:rotate(-4deg)}
.guide-address span{font-size:21px}
.guide-address strong{font:400 90px/1.15 'Anton SC',sans-serif}
.guide-address small{font-size:16px}

/* סיכום: the one paragraph to remember, a size up. */
.information-content .guide-summary p{font-size:19px;line-height:1.8;max-width:720px;color:var(--color-foreground)}

/* שאלות נפוצות: the site's accordion. */
.guide-questions h2{margin-bottom:12px}
.guide-questions details{padding:0;border-bottom:1px solid var(--color-rule)}
.guide-questions details:last-of-type{border-bottom:0}
.guide-questions summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0;font-size:17px}
.guide-questions summary:after{content:'+';color:var(--color-primary);font-size:25px;line-height:1}
.guide-questions details[open] summary:after{content:'−'}
.guide-questions summary::-webkit-details-marker{display:none}
.information-content .guide-questions details p{margin:0 0 22px;font-size:15px;line-height:1.8;max-width:600px}
.information-content section.guide-questions{padding-bottom:26px}

/* Closing: the size guide's own line in the display face on sand, the way the story
   and clients pages close, pointing at the quote form with the phone under it. */
.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:28px 40px;padding:34px 36px;margin-top:6px;border-radius:12px;background:var(--guide-sand)}
.guide-cta h2{font:700 48px/1.08 var(--f-display);margin:0 0 12px}
.information-content .guide-cta p{font-size:15px;line-height:1.7;margin:0;max-width:420px}
.guide-cta-actions{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.guide-page .submit{margin:0;width:auto;min-height:54px;padding:15px 28px;gap:18px;font-size:16px;text-decoration:none}
.guide-cta-actions>a:last-child{display:inline-block;padding-block:12px;font-size:14px;line-height:20px;color:var(--color-primary)}
.guide-page :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

@media(max-width:1180px){
  .information-grid{gap:48px}
  .guide-step{grid-template-columns:minmax(0,1fr) 320px;gap:28px 40px}
  .guide-step--flip{grid-template-columns:320px minmax(0,1fr)}
  .guide-kit{gap:28px}
  .guide-kit li+li{padding-inline-start:28px}
  .guide-categories{gap:16px}
}
@media(max-width:1020px){
  .guide-step,.guide-step--flip{grid-template-columns:1fr;gap:26px}
  .guide-step--flip .guide-step-text{order:0}
  .guide-figure{max-width:420px}
}
@media(max-width:900px){
  .information-grid{grid-template-columns:160px minmax(0,1fr);gap:34px}
  .information-heading{display:block;padding:36px 0 30px}
  .information-heading h1{margin-bottom:24px}
  .information-heading>div{max-width:560px;padding-bottom:0}
  .guide-kit{grid-template-columns:1fr;gap:0}
  .guide-kit li{flex-direction:row;align-items:flex-start;gap:18px;padding:16px 0}
  .guide-kit li:first-child{padding-top:4px}
  .guide-kit li:last-child{padding-bottom:0}
  .guide-kit li+li{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--color-rule)}
  .guide-kit .guide-number{flex:none;inline-size:2.2ch;padding-top:5px}
  .guide-mistakes ol{grid-template-columns:1fr;padding:22px 24px 4px}
  .guide-categories{grid-template-columns:1fr 1fr}
  .guide-team{display:block}
  .guide-address{display:none}
  .guide-cta{flex-direction:column;align-items:flex-start}
  .guide-cta-actions{align-items:flex-start}
}
@media(max-width:600px){
  .information-layout{padding:16px 16px 48px}
  .information-heading{display:block;padding:24px 0 22px}
  .information-heading h1{font-size:clamp(44px,15vw,72px);margin-bottom:22px}
  .information-heading>div{max-width:none;padding-bottom:0}
  .information-heading p{font-size:15px}
  .information-heading .guide-kicker{font-size:13px;margin-bottom:10px}
  .information-grid{display:block}
  .guide-aside{position:static}
  .information-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:2px 18px;padding:8px 0 14px;border-top:0}
  .information-nav h2{width:100%;font-size:14px;margin:0 0 2px;opacity:.65}
  .information-nav a{font-size:13px;min-height:44px;display:inline-flex;align-items:center;padding:0;text-decoration:underline}
  /* The reading marker is drawn for the desktop column; the wrapped row keeps the blue word only. */
  .information-nav .motion-spy{display:none}
  .information-content section{scroll-margin-top:84px;padding:24px 0 34px}
  .information-content h2{font-size:24px;margin-bottom:14px}
  .information-content p{font-size:15px;line-height:1.8}
  .guide-kit p{font-size:14px}
  .guide-number{font-size:19px}
  .guide-figure{max-width:none}
  .guide-note{grid-template-columns:84px minmax(0,1fr);align-items:start;gap:16px;padding:14px;padding-inline-end:16px}
  .guide-note img{width:84px;height:84px}
  .information-content .guide-note p{font-size:14px}
  .information-content p.guide-tip{font-size:14px;padding-inline-start:14px}
  .guide-mistakes ol{padding:18px 18px 2px}
  .guide-mistakes li{font-size:14px;gap:14px}
  .guide-categories{gap:18px 14px;margin-top:24px}
  .guide-categories a>span:last-child{font-size:14px;padding-top:10px}
  .information-content .guide-summary p{font-size:17px}
  .guide-questions summary{font-size:16px;padding:18px 0}
  .information-content .guide-questions details p{font-size:14px}
  .guide-cta{padding:26px 20px 14px;gap:20px}
  .guide-cta h2{font-size:42px;margin-bottom:10px}
  .information-content .guide-cta p{font-size:14px}
  .guide-cta-actions{align-items:center;width:100%}
  .guide-page .submit{width:100%;font-size:15px;padding:14px 18px}
}
@media(prefers-reduced-motion:reduce){.guide-categories img,.guide-categories b{transition:none}}

/* English retains the composition with a readable Latin type scale. */
html[lang^="en"] .information-heading h1{font-size:clamp(46px,6vw,84px);line-height:1.1}
html[lang^="en"] .guide-categories a:hover b{transform:translateX(4px)}