/* Layout "timeline" (/8/): a wide product strip on top, then the package, shipping and payment sections joined by a
   vertical timeline with big numbered dots; the order summary stays on the right. */
.fn-l-timeline .fn-grid{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"show show" "packs side" "details side" "pay side";align-items:start;counter-reset:tl}
.fn-l-timeline .fn-side{position:sticky;top:16px}
/* product strip */
.fn-l-timeline .fn-showcase{display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:22px;align-items:center;padding:14px}
.fn-l-timeline .fn-show-img{grid-row:1 / span 3;width:170px;height:170px;aspect-ratio:auto}
.fn-l-timeline .fn-show-title{grid-column:2;grid-row:1;margin:0;align-self:end}
.fn-l-timeline .fn-show-points{grid-column:2;grid-row:2;grid-template-columns:repeat(4,auto);justify-content:start}
.fn-l-timeline .fn-g-thumbs{grid-column:2;grid-row:3;display:flex;gap:8px;margin:0;align-self:start}
.fn-l-timeline .fn-g-thumbs button{width:56px;height:56px}
/* timeline */
.fn-l-timeline :is(.fn-packs-card,.fn-details,.fn-pay-card){position:relative;margin-left:64px;overflow:visible;counter-increment:tl}
.fn-l-timeline :is(.fn-packs-card,.fn-details,.fn-pay-card)::before{content:counter(tl);position:absolute;left:-64px;top:18px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#e8553a,#f59e3b);color:#fff;display:grid;place-items:center;font:700 1.15rem Sora,sans-serif;box-shadow:0 0 0 6px #f2f1ef}
.fn-l-timeline :is(.fn-packs-card,.fn-details)::after{content:"";position:absolute;left:-43px;top:68px;bottom:-24px;width:3px;border-radius:3px;background:linear-gradient(#f59e3b,#f3c7b7)}
.fn-l-timeline :is(.fn-packs-card,.fn-details,.fn-pay-card)>h2 .fn-num{display:none}
@media (max-width:900px){
  .fn-l-timeline .fn-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"show" "side" "packs" "details" "pay"}
  .fn-l-timeline .fn-side{position:static}
  .fn-l-timeline .fn-showcase{grid-template-columns:110px minmax(0,1fr);column-gap:14px}
  .fn-l-timeline .fn-show-img{width:110px;height:110px}
  .fn-l-timeline .fn-show-points{display:none}
  .fn-l-timeline .fn-show-title{font-size:1.05rem}
  .fn-l-timeline .fn-g-thumbs button{width:40px;height:40px}
  .fn-l-timeline :is(.fn-packs-card,.fn-details,.fn-pay-card){margin-left:40px}
  .fn-l-timeline :is(.fn-packs-card,.fn-details,.fn-pay-card)::before{left:-40px;width:32px;height:32px;font-size:.95rem;box-shadow:0 0 0 4px #f2f1ef}
  .fn-l-timeline :is(.fn-packs-card,.fn-details)::after{left:-25px;top:56px}
  .fn-l-timeline .fn-pack-img{display:none}
}

/* ---- thank-you page: the order as a timeline — placed ✓, delivery 📍, overview 🧾, help 💬 — joined by a vertical line */
.fn-l-timeline .fn-ty-banner{background:linear-gradient(120deg,#24262b 0%,#e8553a 75%,#f59e3b 100%);padding:44px 0 84px}
.fn-l-timeline .fn-ty-check{background:#fff;color:#e8553a}
.fn-l-timeline .fn-ty-banner h1{font:700 clamp(1.6rem,3vw,2.3rem) Sora,sans-serif;color:#fff}
.fn-l-timeline .fn-ty2{position:relative;padding-left:62px}
.fn-l-timeline .fn-ty2::before{content:"";position:absolute;left:21px;top:140px;bottom:40px;width:3px;border-radius:3px;background:linear-gradient(#e8553a,#f3c7b7)}
.fn-l-timeline .fn-ty2>:is(section,.fn-ty-addrs,.fn-ty-help){position:relative}
.fn-l-timeline .fn-ty2>:is(section,.fn-ty-addrs,.fn-ty-help)::before{position:absolute;left:-62px;top:16px;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.15rem;box-shadow:0 0 0 3px #e8553a,0 0 0 8px #f2f1ef;z-index:1}
.fn-l-timeline .fn-ty2>section:nth-of-type(1)::before{content:"✓";background:linear-gradient(135deg,#e8553a,#f59e3b);color:#fff;font-weight:800}
.fn-l-timeline .fn-ty-addrs::before{content:"📍"}
.fn-l-timeline .fn-ty2>section:nth-of-type(2)::before{content:"🧾"}
.fn-l-timeline .fn-ty-help::before{content:"💬"}
.fn-l-timeline :is(.fn-ty-card,.fn-ty-addr,.fn-ty-help){border-radius:22px;border:0;box-shadow:0 10px 30px rgba(36,38,43,.07)}
.fn-l-timeline .fn-ty-help{background:#fff}
.fn-l-timeline .fn-ty-total{background:linear-gradient(90deg,#fde3d8,#fff1e4)}
@media (max-width:640px){
  .fn-l-timeline .fn-ty2{padding-left:46px}
  .fn-l-timeline .fn-ty2::before{left:30px}
  .fn-l-timeline .fn-ty2>:is(section,.fn-ty-addrs,.fn-ty-help)::before{left:-44px;width:32px;height:32px;font-size:.9rem}
}
/* ==== bigger product photo ==== */
@media (min-width:601px){.fn-l-timeline .fn-showcase{grid-template-columns:320px minmax(0,1fr)}.fn-l-timeline .fn-show-img{width:320px;height:320px}.fn-l-timeline .fn-g-thumbs button{width:68px;height:68px}}
@media (max-width:600px){.fn-l-timeline .fn-showcase{grid-template-columns:minmax(0,1fr)}.fn-l-timeline .fn-showcase>*{grid-column:1/-1;grid-row:auto}.fn-l-timeline .fn-show-img{width:100%;max-width:440px;height:auto;aspect-ratio:1;margin:0 auto 12px}.fn-l-timeline .fn-g-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.fn-l-timeline .fn-g-thumbs button{width:auto;height:auto;aspect-ratio:1}}