/* REDBACK brand page. The information-page shell (full-width display title, side index, hairline sections,
   sand panel, +/− accordions, blue pill) around the shop's own product photos. Every photo was shot on the same
   flat ground (#F0ECE3), so --rb-tile is mixed to that colour and the photos are blended into it (darken):
   a boot sits in its tile with no visible frame, and two photos can share one tile. */
.redback-main{--rb-tile:color-mix(in srgb,var(--color-sand-300) 11%,var(--paper-background));--rb-panel:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background));max-width:1240px;width:100%;min-width:0;margin:auto;padding:24px 40px 65px}
/* A Hebrew prefix and its Latin code (ב-USBOK, מ-TPU) stay on one line, and a size range moves to the next line whole. */
.rb-nw,.redback-main bdi[dir="ltr"]{white-space:nowrap}
.rb-kicker{font-size:13px;color:var(--color-soft-foreground);margin:0 0 22px}
.rb-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 the lead, the way to the shop and the two kinds of boot on the
   reading side; on the other side two of the leathers in one tile. */
.rb-hero{padding:14px 0 58px}
.rb-hero h1{font:700 clamp(60px,6.6vw,96px)/.98 var(--f-display);margin:0 0 40px}
.rb-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:64px}
/* The text column is as tall as the figure; its bottom padding is the caption's height, so the two counts end on the photo's bottom edge. */
.rb-intro-text{display:flex;flex-direction:column;align-items:start;padding:4px 0 30px}
.rb-intro-text p{max-width:530px;margin:0}
.rb-lead{font-size:23px;line-height:1.6}
.rb-lead+p{font-size:16px;line-height:1.8;color:var(--color-muted-foreground);margin-top:16px}
.rb-hero-actions{margin:28px 0 46px}
.redback-page .rb-cta{display:inline-flex;width:auto;min-height:54px;margin:0;padding:15px 28px;font-size:16px;text-decoration:none;flex-shrink:0}
.rb-jump{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;width:100%;max-width:530px}
.rb-jump a{display:flex;align-items:center;gap:14px;padding:18px 0 0;border-top:1px solid var(--color-rule);color:inherit;text-decoration:none}
.rb-jump b{flex:none;font:700 66px/.9 var(--f-display);color:var(--color-primary)}
.rb-jump span{font-size:14px;line-height:1.55;text-wrap:balance;transition:color var(--motion-feedback) var(--ease-out)}
.rb-jump span::after{content:' ↓';color:var(--color-primary);white-space:nowrap}
.rb-hero-photo{margin:0}
.rb-stage{position:relative;aspect-ratio:6/5;overflow:hidden;border-radius:6px;background:var(--rb-tile);isolation:isolate}
.rb-stage img{position:absolute;display:block;height:auto;max-width:none;mix-blend-mode:darken}
.rb-stage-front{width:68%;left:-2%;top:23.5%}
.rb-stage-back{width:50%;left:47%;top:3%}
.rb-hero-photo figcaption{font-size:12px;color:var(--color-soft-foreground);margin:12px 0 0}

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

/* What the seven share: the paragraph, and beside it the four points as a short spec list. */
.rb-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:52px;align-items:start;padding-top:4px}
.rb-split>p{font-size:16px;line-height:1.8;margin:0}
.rb-facts{list-style:none;margin:0;padding:0}
.rb-facts li{position:relative;padding:0 0 14px;padding-inline-start:20px;margin:0 0 14px;border-bottom:1px solid var(--color-rule);font-size:15px;line-height:1.65}
.rb-facts li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.rb-facts li::before{content:'';position:absolute;inset-inline-start:0;top:9px;width:6px;height:6px;background:var(--color-marker)}

/* The models: a tile per boot. Black and dark brown lead each group at the wider size. */
.rb-model-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 24px}
.rb-model{grid-column:span 2;min-width:0}
.rb-model:nth-child(-n+2){grid-column:span 3}
.rb-model-link{display:block;color:inherit;text-decoration:none}
.rb-tile{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--rb-tile);isolation:isolate}
.rb-tile img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:darken}
.rb-model:nth-child(-n+2) .rb-tile,.rb-sb .rb-tile{aspect-ratio:5/4}
.rb-model-name{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 4px;font-size:18px;line-height:1.4;color:inherit;text-decoration:none;transition:color var(--motion-feedback) var(--ease-out)}
.rb-model-name::after{content:'←';flex:none;color:var(--color-primary);font-size:17px;line-height:1;transition:transform var(--motion-lift) var(--ease-out)}
.rb-model-note,.rb-sb-text p{margin:0;font-size:14px;line-height:1.7;color:var(--color-soft-foreground);max-width:400px}
@media(hover:hover){
  .rb-model-link:hover .rb-model-name,.rb-sb .rb-model-name:hover,.rb-jump a:hover span{color:var(--color-primary)}
  .rb-model-link:hover .rb-model-name::after,.rb-sb .rb-model-name:hover::after{transform:translateX(-4px)}
}

/* Safety boots: the same tile, with the standard named on it. The name is the link and covers the whole card. */
.rb-sb-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rb-sb{position:relative;min-width:0}
.rb-sb .rb-model-name::before{content:'';position:absolute;inset:0;z-index:1}
.rb-tag{position:absolute;top:12px;inset-inline-start:12px;font-size:12px;line-height:1.4;color:var(--color-primary);background:var(--paper-background);border-radius:999px;padding:5px 12px}

/* Choosing: three steps, then the seven models in one table with the two SB rows tinted. */
.rb-steps{list-style:none;counter-reset:rb;margin:8px 0 38px;padding:0;display:grid;grid-template-columns:1.15fr .8fr 1.15fr;gap:0 32px}
.rb-steps li{counter-increment:rb;border-top:1px solid var(--color-rule);padding:16px 0 0;font-size:15px;line-height:1.75}
.rb-steps li::before{content:counter(rb,decimal-leading-zero);display:block;font:400 21px/1 'Anton SC',sans-serif;color:var(--color-marker);margin-bottom:12px}
.rb-table-wrap{overflow:hidden;border:1px solid var(--color-rule);border-radius:8px;margin:0 0 26px}
.rb-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;font-variant-numeric:tabular-nums}
.rb-table caption{text-align:start;font-size:14px;color:var(--color-soft-foreground);padding:14px 18px 12px}
.rb-table th,.rb-table td{text-align:start;font-weight:400;padding:10px 18px;border-top:1px solid var(--color-rule);vertical-align:middle;line-height:1.45}
.rb-table thead th{background:color-mix(in srgb,var(--color-sand-300) 24%,var(--paper-background));font-size:14px;padding-block:13px}
.rb-table tbody th{position:relative;height:74px;padding-inline-start:86px;width:38%}
.rb-table tbody th img{position:absolute;inset-inline-start:18px;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:5px}
.rb-table tbody th a{display:block;width:fit-content;font-size:16px;color:var(--color-primary);text-underline-offset:4px}
.rb-table tbody th small{display:block;margin-top:2px;font-size:13px;color:var(--color-soft-foreground)}
.rb-table .rb-row-sb :is(th,td){background:color-mix(in srgb,var(--color-primary) 5%,var(--paper-background))}

/* Ordering: the shipping page's sand panel, the three numbers it quotes pulled out beside the text. */
.rb-order-panel{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:40px;align-items:center;padding:30px 34px;border-radius:12px;background:var(--rb-panel)}
.rb-order-text p:last-child{margin-bottom:0}
.rb-order-stats{display:grid;gap:20px;margin:0;padding-inline-start:34px;border-inline-start:1px solid var(--color-rule)}
.rb-order-stats div{display:flex;flex-direction:column-reverse;gap:4px}
.rb-order-stats dt{font-size:13px;color:var(--color-soft-foreground)}
.rb-order-stats dd{margin:0;font:700 40px/1.05 var(--f-display);color:var(--color-primary)}

/* FAQ: the shipping page's +/− rows. */
.rb-faq details{border-bottom:1px solid var(--color-rule)}
.rb-faq details:first-of-type{border-top:1px solid var(--color-rule)}
.rb-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}
.rb-faq summary::after{content:'+';flex:none;color:var(--color-primary);font-size:26px;line-height:1}
.rb-faq details[open] summary::after{content:'−'}
.rb-faq summary::-webkit-details-marker{display:none}
.rb-faq details p{margin:0 0 22px;font-size:15px;line-height:1.8;max-width:620px;color:var(--color-muted-foreground)}

/* Close: a question goes to the factory, everything else to the shop category. */
.rb-close{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:6px 0 10px}
.rb-close h2{font:700 46px/1.05 var(--f-display);margin:0 0 10px}
.rb-close>div a{font-size:16px}
.redback-main :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

@media(max-height:700px) and (min-width:861px){.rb-aside{position:static}}
@media(max-width:1000px){
  .rb-intro{gap:40px}
  .rb-lead{font-size:20px}
  .rb-jump{gap:0 20px}
  .rb-jump b{font-size:56px}
  .rb-grid{grid-template-columns:155px minmax(0,1fr);gap:34px}
  .rb-section h2{font-size:42px}
  .rb-split{gap:34px}
  .rb-steps{gap:0 24px}
  .rb-order-panel{grid-template-columns:1fr;gap:26px;padding:26px}
  .rb-order-stats{grid-template-columns:repeat(3,auto);justify-content:start;gap:36px;padding:0;border:0}
}
@media(max-width:860px){
  .rb-hero h1 br{display:none}
  .rb-grid{display:block;border-top:0}
  .rb-aside{position:static;padding:0}
  .rb-nav{flex-direction:row;flex-wrap:wrap;gap:2px 20px;padding:8px 0 14px;border-top:1px solid var(--color-rule)}
  .rb-nav a{font-size:13px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px}
  .rb-nav .motion-spy{display:none}
  .redback-main .rb-nav a[aria-current="location"]{color:inherit}
  .rb-section{scroll-margin-top:84px;padding:24px 0 42px}
  .rb-section+.rb-section{padding-top:34px}
}
@media(max-width:600px){
  .redback-main{padding:16px 16px 48px}
  .rb-kicker{font-size:12px;margin-bottom:16px}
  .rb-hero{padding:4px 0 32px}
  .rb-hero h1{font-size:52px;line-height:1;margin-bottom:22px}
  .rb-intro{grid-template-columns:1fr;gap:24px}
  .rb-intro-text{padding:0;order:1}
  .rb-hero-photo{order:0}
  .rb-stage{aspect-ratio:1}
  .rb-stage-front{width:76%;left:-3%;top:27%}
  .rb-stage-back{width:54%;left:45%;top:6%}
  .rb-lead{font-size:19px;line-height:1.6}
  .rb-lead+p{font-size:15px;line-height:1.75;margin-top:14px}
  .rb-hero-actions{margin:24px 0 30px;width:100%}
  .rb-jump{gap:0 14px;max-width:none}
  .rb-jump a{flex-direction:column;align-items:start;gap:10px;height:100%;padding:14px 0 0}
  .rb-jump b{font-size:54px}
  .rb-jump span{font-size:13px;line-height:1.6}
  .rb-section h2{font-size:38px;line-height:1.05;margin-bottom:14px}
  .rb-section>p,.rb-split>p,.rb-order-text p{font-size:15px;line-height:1.75}
  .rb-split{grid-template-columns:1fr;gap:26px;padding-top:0}
  .rb-facts li{font-size:14px}
  .rb-model-grid{grid-template-columns:1fr 1fr;gap:26px 14px}
  .rb-model,.rb-model:nth-child(-n+2){grid-column:auto}
  .rb-model:nth-child(-n+2) .rb-tile{aspect-ratio:1}
  /* Five in two columns leaves one over: it takes the full row as a wide tile, the boot at the same scale. */
  .rb-model:last-child:nth-child(odd){grid-column:1/-1}
  .rb-model:last-child:nth-child(odd) .rb-tile{aspect-ratio:16/9}
  .rb-model-name{font-size:16px;margin-top:10px;gap:8px}
  .rb-model-name::after{font-size:15px}
  .rb-model-note,.rb-sb-text p{font-size:13px}
  .rb-sb-grid{grid-template-columns:1fr;gap:30px}
  .rb-sb .rb-model-name{font-size:18px;margin-top:12px}
  .rb-sb-text p{font-size:14px}
  .rb-steps{grid-template-columns:1fr;margin-bottom:30px}
  .rb-steps li{position:relative;padding:14px 0 16px;padding-inline-start:44px;font-size:14px}
  .rb-steps li::before{position:absolute;inset-inline-start:0;top:17px;font-size:19px;margin:0}
  .rb-table{font-size:14px}
  .rb-table th,.rb-table td{padding:8px 10px}
  .rb-table caption{padding:12px 12px 10px;font-size:13px}
  .rb-table thead th{font-size:12px;padding-block:10px}
  .rb-table tbody th{height:64px;padding-inline-start:60px;width:auto}
  .rb-table tbody th img{inset-inline-start:10px;width:40px;height:40px;margin-top:-20px}
  .rb-table tbody th a{font-size:14px}
  .rb-table tbody th small{font-size:12px}
  .rb-order-panel{padding:20px;gap:22px}
  .rb-order-stats{gap:14px 24px;grid-template-columns:repeat(3,auto)}
  .rb-order-stats dd{font-size:32px}
  .rb-order-stats dt{font-size:12px}
  .rb-faq summary{font-size:16px;padding:18px 0}
  .rb-faq details p{font-size:14px}
  .rb-close{flex-direction:column;align-items:stretch;gap:24px;padding-top:0}
  .rb-close h2{font-size:38px}
  .redback-page .rb-cta{width:100%;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.rb-model-name,.rb-model-name::after,.rb-nav a,.rb-jump span{transition:none}}