/* The photographic process belongs only to the fermented tea detail page. */
.product-process-jump{display:inline-flex;align-items:center;gap:18px;align-self:flex-start;margin-top:24px;padding-bottom:7px;border-bottom:1px solid #b9c9a873;color:#dce6da;font:500 11px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.product-process-jump span{font-size:18px;line-height:1}
.product-process-jump:hover{color:#fff;border-color:#dce6da}
.product-process-jump:focus-visible{outline:2px solid #dce6da;outline-offset:7px}
.tea-process{padding:72px 32px 88px;border-top:1px solid var(--line);background:var(--paper);color:var(--ink);scroll-margin-top:28px}
.tea-process-wrap{max-width:1320px;margin:0 auto}
.tea-process-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:70px;padding-bottom:42px}
.tea-process-head .eyebrow{color:var(--olive-text);font-size:10px;letter-spacing:.16em}
.tea-process-head h2{margin-top:15px;font-size:clamp(36px,3.5vw,54px);line-height:1.24;color:var(--forest)}
.tea-process-lead{max-width:430px;margin:0 0 4px auto;color:var(--muted);font-size:15px;line-height:1.85}
.tea-process-phase{padding:29px 0 34px;border-top:1px solid var(--line)}
.tea-process-phase-head{display:flex;align-items:baseline;gap:24px;margin-bottom:35px}
.tea-process-phase-head>p{flex:none;font:500 9px/1.4 var(--sans);letter-spacing:.17em;color:var(--olive-text)}
.tea-process-phase-head h3{color:var(--forest);font:400 clamp(23px,2vw,29px)/1.35 var(--display)}
.tea-process-steps{display:grid;grid-template-columns:repeat(var(--tea-process-columns,7),minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
.tea-process-step{position:relative;min-width:0;text-align:center}
.tea-process-step::after{content:"";position:absolute;left:calc(100% + 2px);top:63px;width:18px;height:7px;background:linear-gradient(var(--line),var(--line)) left center/13px 1px no-repeat;clip-path:none;pointer-events:none}
.tea-process-step::before{content:"";position:absolute;left:calc(100% + 12px);top:61px;width:5px;height:5px;border-right:1px solid #96a082;border-top:1px solid #96a082;transform:rotate(45deg);pointer-events:none}
.tea-process-step:last-child::before,.tea-process-step:last-child::after{display:none}
.tea-process-art{position:relative;max-width:134px;margin:0 auto 22px;padding:4px}
.tea-process-art::before{content:"";position:absolute;inset:-1px 1px 1px -2px;border:1px solid #b4bca563;border-radius:48% 44% 47% 43%;transform:rotate(-9deg);pointer-events:none}
.tea-process-photo{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:45% 50% 46% 49%;background:var(--paper-deep)}
.tea-process-atlas{position:absolute;display:block;width:400%;max-width:none;height:300%;left:calc(var(--tile-column) * -100%);top:calc(var(--tile-row) * -100%);object-fit:fill}
.tea-process-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.tea-process-photo--pending{display:grid;place-items:center;padding:18%;text-align:center;font:400 12px/1.6 var(--sans);color:var(--muted)}
.tea-process-number{position:absolute;bottom:-12px;left:-2px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper);border:1px solid #cdd0bd;color:var(--olive-text);font:500 11px/1 var(--sans);letter-spacing:.02em}
.tea-process-copy h4{min-height:42px;margin:0 0 9px;color:var(--forest);font:500 13px/1.6 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.tea-process-description{margin:0 auto;max-width:185px;color:var(--muted);font:400 12px/1.7 var(--sans)}
.tea-process-highlight{display:inline-block;margin:0 0 10px;padding:5px 11px;border:1px solid #a9b797;border-radius:2px;color:var(--olive-text);font:500 12px/1.6 var(--sans)}
.tea-process-phase--second{margin-top:6px;padding-top:34px;padding-bottom:25px}
.tea-process-phase--second .tea-process-steps{grid-template-columns:repeat(var(--tea-process-columns,4),minmax(0,1fr));gap:48px;max-width:1100px;margin:0 auto}
.tea-process-phase--second .tea-process-art{max-width:152px}
.tea-process-phase--second .tea-process-copy h4{min-height:0;font-size:14px}
.tea-process-phase--second .tea-process-description{max-width:235px;font-size:13px}
.tea-process-phase--second .tea-process-step::after{left:calc(100% + 5px);top:73px;width:35px;background-size:30px 1px}
.tea-process-phase--second .tea-process-step::before{left:calc(100% + 31px);top:71px}
.tea-process-step--highlight .tea-process-art::before{border-color:#879b69}
.tea-process-caption{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font:400 10px/1.6 var(--sans)}
@media(max-width:1120px){
  .tea-process-head{gap:40px}
  .tea-process-steps{grid-template-columns:repeat(var(--tea-process-columns-medium,4),minmax(0,1fr));gap:36px 32px}
  .tea-process-step:nth-child(4n)::after,.tea-process-step:nth-child(4n)::before{display:none}
  .tea-process-step::after{left:calc(100% + 6px);width:22px;background-size:17px 1px}
  .tea-process-step::before{left:calc(100% + 19px)}
  .tea-process-phase--second .tea-process-steps{gap:32px}
  .tea-process-phase--second .tea-process-step::after{left:calc(100% + 3px);width:25px;background-size:20px 1px}
  .tea-process-phase--second .tea-process-step::before{left:calc(100% + 19px)}
}
@media(max-width:800px){
  .tea-process{padding:58px 24px 68px}
  .tea-process-head{grid-template-columns:1fr;gap:22px;padding-bottom:30px}
  .tea-process-lead{max-width:580px;margin:0;font-size:14px}
  .tea-process-steps,.tea-process-phase--second .tea-process-steps{grid-template-columns:repeat(var(--tea-process-columns-tablet,3),minmax(0,1fr));gap:35px 25px}
  .tea-process-phase--second .tea-process-art{max-width:134px}
  .tea-process-step::before,.tea-process-step::after,.tea-process-phase--second .tea-process-step::before,.tea-process-phase--second .tea-process-step::after{display:none}
  .tea-process-copy h4{min-height:0}
}
@media(max-width:600px){
  .tea-process{padding:48px 20px 58px}
  .tea-process-head h2{font-size:clamp(33px,8.5vw,45px)}
  .tea-process-phase{padding-top:25px}
  .tea-process-phase-head{display:block;margin-bottom:26px}
  .tea-process-phase-head h3{margin-top:9px;font-size:24px}
  .tea-process-steps,.tea-process-phase--second .tea-process-steps{grid-template-columns:1fr;gap:28px}
  .tea-process-step{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:23px;text-align:left}
  .tea-process-art,.tea-process-phase--second .tea-process-art{width:92px;max-width:92px;margin:0}
  .tea-process-step:not(:last-child)::after,.tea-process-phase--second .tea-process-step:not(:last-child)::after{display:block;top:calc(100% + 6px);left:45px;width:1px;height:17px;background:var(--line)}
  .tea-process-number{width:29px;height:29px;bottom:-5px;font-size:10px}
  .tea-process-copy h4,.tea-process-phase--second .tea-process-copy h4{margin-bottom:5px;min-height:0;font-size:13px}
  .tea-process-description,.tea-process-phase--second .tea-process-description{max-width:none;margin:0;font-size:12px}
  .tea-process-highlight{margin:3px 0 7px;padding:3px 8px;font-size:11px}
  .tea-process-phase--second{margin-top:0}
}