/* ==========================================================================
   SEO for eCommerce (September 2026 redesign): this page's own pictures.
   Loaded after ind-seox.css; every rule is scoped to the eCommerce page.
   Parts: resources/views/industries/seo/ecommerce/{hero,why,versus,visual}.blade.php
   Every picture rests complete without JS and under reduced motion; loops
   pause off screen (ind-wdp.css pauses sections that are not .is-live).
   ========================================================================== */

/* ---- HERO: a shopping search, your product climbs to the front of the shelf ---- */
main[data-seo-page="ecommerce"] .sxe-shop{--pad:20px;position:relative;display:grid;gap:14px;padding:18px var(--pad) 22px;border-radius:34px;border:1px solid var(--edge-2);isolation:isolate;overflow:hidden;
  background:radial-gradient(70% 45% at 30% 0%,rgba(244,160,0,.09),transparent 70%),radial-gradient(60% 40% at 100% 100%,rgba(79,191,160,.05),transparent 70%),#0A0C10;
  box-shadow:0 60px 120px -60px rgba(0,0,0,.95)}
main[data-seo-page="ecommerce"] .sxe-defs{position:absolute;width:0;height:0;overflow:hidden}
main[data-seo-page="ecommerce"] .sxe-shop__top{display:flex;align-items:center;gap:14px;min-width:0;padding:0 0 14px;border-bottom:1px solid var(--edge)}
main[data-seo-page="ecommerce"] .sxe-dots{display:flex;gap:6px;flex:0 0 auto}
main[data-seo-page="ecommerce"] .sxe-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
/* the search bar fills the top of the shop; the words sit left, the caret straight after the last
   letter as they type. A query too long for the bar is set smaller before it types (never cut short) */
main[data-seo-page="ecommerce"] .sxe-search{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow:hidden;height:40px;padding:0 16px 0 14px;border-radius:100px;
  border:1px solid var(--gold-line);background:#12151A;color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 0 0 4px rgba(244,160,0,.05)}
main[data-seo-page="ecommerce"] .sxe-search svg{flex:0 0 auto;margin-right:9px;color:var(--gold)}
main[data-seo-page="ecommerce"] .sxe-search__q{flex:0 0 auto;white-space:nowrap}
main[data-seo-page="ecommerce"] .sxe-search__caret{flex:0 0 auto;width:2px;height:1.15em;margin-left:2px;border-radius:1px;background:var(--gold);animation:sxeCaret 1.05s steps(1) infinite}
@keyframes sxeCaret{50%{opacity:0}}
main[data-seo-page="ecommerce"] .sxe-tabs{display:flex;flex-wrap:wrap;gap:6px}
main[data-seo-page="ecommerce"] .sxe-tabs span{padding:4px 11px;border-radius:100px;border:1px solid var(--edge);font-size:11.5px;font-weight:600;color:var(--text-dim)}
main[data-seo-page="ecommerce"] .sxe-tabs .is-on{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold)}

/* the shelf: three product cards, the art drawn in the page */
main[data-seo-page="ecommerce"] .sxe-shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
main[data-seo-page="ecommerce"] .sxe-prod{--c1:#8FA3B8;--c2:#E7E9ED;--c3:#353B44;position:relative;display:grid;gap:2px;min-width:0;padding:8px 8px 11px;border-radius:16px;border:1px solid var(--edge);background:#0F1216;
  transition:opacity .5s,border-color .5s,background .5s,box-shadow .5s}
main[data-seo-page="ecommerce"] .sxe-prod--2{--c1:#C98C82;--c2:#EFE7E2;--c3:#3F3536}
main[data-seo-page="ecommerce"] .sxe-prod.is-you{--c1:#F2AE2E;--c2:#FBF4E6;--c3:#2B2A27;border-color:var(--gold-line);
  background:linear-gradient(180deg,rgba(244,160,0,.11),rgba(244,160,0,.02));box-shadow:0 18px 40px -22px rgba(244,160,0,.55)}
main[data-seo-page="ecommerce"] .sxe-prod__img{position:relative;display:block;aspect-ratio:4/3;margin-bottom:7px;border-radius:11px;overflow:hidden;
  background:radial-gradient(75% 75% at 50% 38%,rgba(255,255,255,.11),rgba(255,255,255,.015) 72%),#171A20}
main[data-seo-page="ecommerce"] .sxe-prod.is-you .sxe-prod__img{background:radial-gradient(75% 75% at 50% 38%,rgba(255,214,140,.2),rgba(244,160,0,.03) 72%),#1A1812}
main[data-seo-page="ecommerce"] .sxe-prod__img svg{position:absolute;inset:6% 5% 2%;width:90%;height:92%;overflow:visible;transition:transform .5s var(--ease),opacity .4s}
main[data-seo-page="ecommerce"] .sxe-prod__you{position:absolute;left:6px;top:6px;padding:1px 7px;border-radius:100px;background:var(--gold);color:#111;font:700 9.5px/1.6 Inter,system-ui,sans-serif;font-style:normal;white-space:nowrap}
main[data-seo-page="ecommerce"] .sxe-prod__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text-soft)}
main[data-seo-page="ecommerce"] .sxe-prod__price{font-family:var(--font-head);font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
main[data-seo-page="ecommerce"] .sxe-prod.is-you .sxe-prod__price{color:var(--gold)}
main[data-seo-page="ecommerce"] .sxe-prod__rate{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-dim)}
main[data-seo-page="ecommerce"] .sxe-prod__rate i{font-style:normal;font-size:9.5px;letter-spacing:.5px;color:var(--gold)}
main[data-seo-page="ecommerce"] .sxe-prod__store{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--text-dim)}
/* a gentle turntable on your product */
main[data-seo-page="ecommerce"] .sxe-prod.is-you .sxe-prod__img svg{animation:sxeFloat 4.8s ease-in-out infinite}
@keyframes sxeFloat{50%{transform:translateY(-3px) rotate(-1.5deg)}}
/* the moves (set by the script): results loading, then yours climbing in */
main[data-seo-page="ecommerce"] .sxe-shelf.is-loading .sxe-prod{opacity:.35}
main[data-seo-page="ecommerce"] .sxe-shelf.is-loading .sxe-prod__img svg{opacity:0;transform:translateY(8px) scale(.9)}
main[data-seo-page="ecommerce"] .sxe-prod.is-low{opacity:.5;border-color:var(--edge);background:#0F1216;box-shadow:none}
main[data-seo-page="ecommerce"] .sxe-prod.is-won{animation:sxeWon 1.2s var(--ease)}
@keyframes sxeWon{0%{box-shadow:0 0 0 0 rgba(244,160,0,.7)}100%{box-shadow:0 0 0 14px rgba(244,160,0,0),0 18px 40px -22px rgba(244,160,0,.55)}}

/* the organic results: yours first, with its product rich result */
main[data-seo-page="ecommerce"] .sxe-serp{display:grid;gap:8px}
main[data-seo-page="ecommerce"] .sxe-serp__label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 4px 0}
main[data-seo-page="ecommerce"] .sxe-serp__label b{font-family:var(--font-head);font-size:13.5px;color:var(--text)}
main[data-seo-page="ecommerce"] .sxe-serp__label span{font-size:10.5px;color:var(--text-dim);text-align:right}
main[data-seo-page="ecommerce"] .sxe-serp__list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
main[data-seo-page="ecommerce"] .sxe-res{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 9px;border-radius:13px;border:1px solid transparent}
main[data-seo-page="ecommerce"] .sxe-res.is-you{background:var(--gold-soft);border-color:var(--gold-line)}
main[data-seo-page="ecommerce"] .sxe-res:not(.is-you){opacity:.72}
main[data-seo-page="ecommerce"] .sxe-res__n{display:grid;place-items:center;align-self:start;margin-top:1px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);font:700 11px/1 var(--font-head);color:var(--text-mid)}
main[data-seo-page="ecommerce"] .sxe-res.is-you .sxe-res__n{background:var(--gold);color:#111}
main[data-seo-page="ecommerce"] .sxe-res__body{display:grid;gap:2px;min-width:0}
main[data-seo-page="ecommerce"] .sxe-res__url{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px;color:var(--teal)}
main[data-seo-page="ecommerce"] .sxe-res__url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main[data-seo-page="ecommerce"] .sxe-res__url em{flex:0 0 auto;padding:1px 7px;border-radius:100px;background:var(--gold);color:#111;font:700 9.5px/1.6 Inter,system-ui,sans-serif;font-style:normal}
main[data-seo-page="ecommerce"] .sxe-res__title{font-size:13.5px;font-weight:600;line-height:1.3;color:#CFD7F2}
main[data-seo-page="ecommerce"] .sxe-res__note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--text-dim)}
main[data-seo-page="ecommerce"] .sxe-res__rich{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-soft)}
main[data-seo-page="ecommerce"] .sxe-res__rich i{font-style:normal;font-size:10px;letter-spacing:.5px;color:var(--gold)}
main[data-seo-page="ecommerce"] .sxe-res__thumb{--c1:#F2AE2E;--c2:#FBF4E6;--c3:#2B2A27;position:relative;align-self:center;width:74px;height:58px;border-radius:10px;overflow:hidden;
  background:radial-gradient(75% 75% at 50% 38%,rgba(255,214,140,.2),rgba(244,160,0,.03) 72%),#1A1812;border:1px solid var(--gold-line)}
main[data-seo-page="ecommerce"] .sxe-res__thumb svg{position:absolute;inset:6%;width:88%;height:88%;overflow:visible;transition:opacity .4s,transform .5s var(--ease)}
main[data-seo-page="ecommerce"] .sxe-shop.is-swapping .sxe-res__thumb svg{opacity:0;transform:scale(.85)}
main[data-seo-page="ecommerce"] .sxe-shop__cap{margin:2px 0 0;padding-left:14px;border-left:2px solid var(--gold);font-family:var(--font-head);font-weight:700;font-size:16.5px;line-height:1.3;
  letter-spacing:-.01em;color:var(--text);text-wrap:balance}

@media (max-width:1180px){
  main[data-seo-page="ecommerce"] .sxe-shop{max-width:620px;width:100%;margin:0 auto}
}
@media (max-width:700px){
  main[data-seo-page="ecommerce"] .sxe-shop{--pad:14px;gap:12px;padding:14px var(--pad) 18px;border-radius:26px}
  main[data-seo-page="ecommerce"] .sxe-dots{display:none}
  main[data-seo-page="ecommerce"] .sxe-shop__top{padding-bottom:12px}
  main[data-seo-page="ecommerce"] .sxe-search{height:38px;padding:0 13px 0 12px;font-size:13.5px}
  main[data-seo-page="ecommerce"] .sxe-search svg{margin-right:7px}
  main[data-seo-page="ecommerce"] .sxe-shelf{gap:7px}
  main[data-seo-page="ecommerce"] .sxe-prod{padding:6px 6px 9px;border-radius:13px}
  main[data-seo-page="ecommerce"] .sxe-prod__img{margin-bottom:5px;border-radius:9px}
  main[data-seo-page="ecommerce"] .sxe-prod__name{display:none}
  main[data-seo-page="ecommerce"] .sxe-prod__store{font-size:10px}
  main[data-seo-page="ecommerce"] .sxe-prod__price{font-size:14px}
  main[data-seo-page="ecommerce"] .sxe-prod__rate i{display:none}
  main[data-seo-page="ecommerce"] .sxe-serp__label{flex-direction:column;align-items:flex-start;gap:2px}
  main[data-seo-page="ecommerce"] .sxe-serp__label span{text-align:left}
  main[data-seo-page="ecommerce"] .sxe-res{gap:8px;padding:8px 7px}
  main[data-seo-page="ecommerce"] .sxe-res__note{display:none}
  main[data-seo-page="ecommerce"] .sxe-res__title{font-size:13px}
  main[data-seo-page="ecommerce"] .sxe-res__thumb{width:58px;height:48px}
  main[data-seo-page="ecommerce"] .sxe-shop__cap{font-size:15.5px}
}

/* ---- WHY 02: traffic by month as a stack of pages that keep ranking; the paid layer stops at the pause ---- */
main[data-seo-page="ecommerce"] .sxe-cake{display:grid;gap:10px;padding:20px 20px 14px}
main[data-seo-page="ecommerce"] .sxe-cake__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
main[data-seo-page="ecommerce"] .sxe-cake__k{font-weight:600;color:var(--text-soft)}
main[data-seo-page="ecommerce"] .sxe-cake__legend{display:flex;gap:14px;font-size:12px;color:var(--text-dim)}
main[data-seo-page="ecommerce"] .sxe-cake__legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
main[data-seo-page="ecommerce"] .sxe-cake__legend i{width:12px;height:12px;border-radius:3px}
main[data-seo-page="ecommerce"] .sxe-cake__legend .is-ads i{border:1px solid rgba(255,122,107,.6);background:repeating-linear-gradient(45deg,rgba(255,122,107,.55) 0 2px,rgba(255,122,107,.08) 2px 5px)}
main[data-seo-page="ecommerce"] .sxe-cake__legend .is-pause i{position:relative;width:14px;height:14px;border-radius:50%;background:var(--coral)}
main[data-seo-page="ecommerce"] .sxe-cake__legend .is-pause i::before{content:"";position:absolute;left:4.5px;top:4px;width:1.6px;height:6px;background:#1A0B08;box-shadow:3.4px 0 0 #1A0B08}
main[data-seo-page="ecommerce"] .sxe-cake__plot{position:relative;height:190px;margin:4px 6px 0}
main[data-seo-page="ecommerce"] .sxe-cake__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
main[data-seo-page="ecommerce"] .sxe-cake__grid line{stroke:rgba(255,255,255,.05);vector-effect:non-scaling-stroke}
main[data-seo-page="ecommerce"] .sxe-cake__ads{fill:url(#sxe-hatch);stroke:rgba(255,122,107,.55);stroke-width:1;vector-effect:non-scaling-stroke}
main[data-seo-page="ecommerce"] .sxe-cake__layer--0{fill:#F4A000}
main[data-seo-page="ecommerce"] .sxe-cake__layer--1{fill:#C98200}
main[data-seo-page="ecommerce"] .sxe-cake__layer--2{fill:#8A5E0E}
main[data-seo-page="ecommerce"] .sxe-cake__layer{stroke:#0A0B0E;stroke-width:1.5;vector-effect:non-scaling-stroke}
main[data-seo-page="ecommerce"] .sxe-cake__own,main[data-seo-page="ecommerce"] .sxe-cake__run{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
main[data-seo-page="ecommerce"] .sxe-cake__own{stroke:#FFD27A;stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(244,160,0,.7))}
main[data-seo-page="ecommerce"] .sxe-cake__run{stroke:#FFF3D6;stroke-width:3.5;stroke-dasharray:.05 .95;stroke-dashoffset:.05;opacity:0}
main[data-seo-page="ecommerce"] .sxe-cake__pause{position:absolute;top:-4px;bottom:0;width:0;border-left:1.5px dashed rgba(255,122,107,.75)}
main[data-seo-page="ecommerce"] .sxe-cake__pause i{position:absolute;left:-10px;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,122,107,.16)}
main[data-seo-page="ecommerce"] .sxe-cake__pause i::before{content:"";position:absolute;left:6px;top:5px;width:2px;height:8px;background:#1A0B08;box-shadow:4px 0 0 #1A0B08}
main[data-seo-page="ecommerce"] .sxe-cake__ic{position:absolute;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:8px;background:rgba(10,11,14,.72);color:#FFE3A6}
main[data-seo-page="ecommerce"] .sxe-cake__ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="ecommerce"] .sxe-cake__months{position:relative;height:16px;margin:0 6px;border-top:1px solid var(--edge)}
main[data-seo-page="ecommerce"] .sxe-cake__months span{position:absolute;top:4px;transform:translateX(-50%);font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
main[data-seo-page="ecommerce"] .sxe-cake__months span:first-child{transform:none}
main[data-seo-page="ecommerce"] .sxe-cake__months span:last-child{transform:translateX(-100%)}
/* motion: the months play in from the left, then a light runs along the top of the stack */
main[data-seo-page="ecommerce"] .sxe-cake__svg{transition:clip-path 2.6s var(--ease) .3s}
html.el8-js main[data-seo-page="ecommerce"] .sx-card:not(.is-in) .sxe-cake__svg{clip-path:inset(-12px 100% -2px 0)}
main[data-seo-page="ecommerce"] .sx-card.is-in .sxe-cake__svg{clip-path:inset(-12px -12px -2px 0)}
main[data-seo-page="ecommerce"] .sxe-cake__pause,main[data-seo-page="ecommerce"] .sxe-cake__ic{transition:opacity .5s ease,transform .5s var(--ease)}
main[data-seo-page="ecommerce"] .sxe-cake__pause{transition-delay:1.7s}
main[data-seo-page="ecommerce"] .sxe-cake__ic{transition-delay:calc(2.3s + var(--i) * .15s)}
html.el8-js main[data-seo-page="ecommerce"] .sx-card:not(.is-in) :is(.sxe-cake__pause,.sxe-cake__ic){opacity:0;transform:translateY(6px)}
main[data-seo-page="ecommerce"] .sx-card.is-in .sxe-cake__run{animation:sxeRun 4.8s ease-in-out 3s infinite}
@keyframes sxeRun{0%{stroke-dashoffset:.05;opacity:0}10%{opacity:1}80%{opacity:1}92%,100%{stroke-dashoffset:-.95;opacity:0}}
main[data-seo-page="ecommerce"] .sx-card.is-in .sxe-cake__pause i{animation:sxePausePing 2.4s ease 2.4s infinite}
@keyframes sxePausePing{0%{box-shadow:0 0 0 0 rgba(255,122,107,.6)}70%,100%{box-shadow:0 0 0 10px rgba(255,122,107,0)}}
@media (max-width:700px){
  main[data-seo-page="ecommerce"] .sxe-cake{padding:14px 14px 10px;gap:8px}
  main[data-seo-page="ecommerce"] .sxe-cake__legend{gap:10px;font-size:11px}
  main[data-seo-page="ecommerce"] .sxe-cake__plot{height:128px;margin:6px 4px 0}
  main[data-seo-page="ecommerce"] .sxe-cake__ic{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:7px}
  main[data-seo-page="ecommerce"] .sxe-cake__ic svg{width:13px;height:13px}
  main[data-seo-page="ecommerce"] .sxe-cake__months{margin:0 4px}
}

/* ---- THE TRADE OFF: orders by month as parcels; SEO + paid stacks up, paid only stops ---- */
main[data-seo-page="ecommerce"] .sxe-orders{--pad:28px;--gap:10px;--up:176px;--axis:28px;--down:40px;position:relative;margin-bottom:34px;padding:24px var(--pad) 20px;border-radius:28px;border:1px solid var(--edge);
  background:radial-gradient(60% 80% at 100% 0%,rgba(244,160,0,.07),transparent 70%),#0A0C10;overflow:hidden}
main[data-seo-page="ecommerce"] .sxe-orders__cols{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
main[data-seo-page="ecommerce"] .sxe-orders__cols::before{content:"";position:absolute;left:-8px;right:-8px;top:calc(var(--up) + var(--axis) / 2);height:1px;background:var(--edge-2)}
main[data-seo-page="ecommerce"] .sxe-orders__col{display:grid;grid-template-rows:var(--up) var(--axis) var(--down);justify-items:center;min-width:0}
main[data-seo-page="ecommerce"] .sxe-orders__up{display:flex;flex-direction:column-reverse;align-items:center;gap:3px;width:100%;padding-bottom:4px}
main[data-seo-page="ecommerce"] .sxe-orders__down{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding-top:4px}
main[data-seo-page="ecommerce"] .sxe-orders__m{position:relative;z-index:1;align-self:center;padding:0 5px;background:#0B0D11;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
main[data-seo-page="ecommerce"] .sxe-box{position:relative;display:block;flex:0 0 auto;width:min(36px,76%);height:18px;border-radius:3px;background:linear-gradient(180deg,#FFD27E 0 5px,#F2A818 5px,#D98E00);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
main[data-seo-page="ecommerce"] .sxe-box::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;margin-left:-2.5px;background:rgba(120,66,0,.38)}
main[data-seo-page="ecommerce"] .sxe-box::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:rgba(90,50,0,.35)}
main[data-seo-page="ecommerce"] .sxe-box.is-paid{border:1px solid rgba(255,122,107,.6);background:repeating-linear-gradient(45deg,rgba(255,122,107,.5) 0 2px,rgba(255,122,107,.08) 2px 5px);box-shadow:none}
main[data-seo-page="ecommerce"] .sxe-box.is-paid::before{background:rgba(255,122,107,.3)}
main[data-seo-page="ecommerce"] .sxe-box.is-paid::after{display:none}
main[data-seo-page="ecommerce"] .sxe-box.is-gone{visibility:hidden}
main[data-seo-page="ecommerce"] .sxe-orders__tag{position:absolute;z-index:2;padding:6px 12px;border-radius:100px;font-size:12.5px;font-weight:700;white-space:nowrap}
main[data-seo-page="ecommerce"] .sxe-orders__tag--own{left:var(--pad);top:22px;background:var(--gold);color:#111}
main[data-seo-page="ecommerce"] .sxe-orders__tag--rent{right:var(--pad);top:calc(24px + var(--up) + var(--axis) + 6px);background:var(--coral-soft);color:var(--coral);border:1px solid var(--coral-line)}
/* where the paid-only budget stops */
main[data-seo-page="ecommerce"] .sxe-orders__stop{position:absolute;top:calc(24px + var(--up) + var(--axis) / 2);height:calc(var(--axis) / 2 + var(--down) + 4px);width:0;border-left:1.5px dashed rgba(255,122,107,.75);
  left:calc(var(--pad) + (100% - var(--pad) * 2 - var(--gap) * 11) / 12 * var(--at) + var(--gap) * (var(--at) - .5))}
main[data-seo-page="ecommerce"] .sxe-orders__stop i{position:absolute;left:-10px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,122,107,.16)}
main[data-seo-page="ecommerce"] .sxe-orders__stop i::before{content:"";position:absolute;left:6px;top:5px;width:2px;height:8px;background:#1A0B08;box-shadow:4px 0 0 #1A0B08}
/* motion: the parcels land month by month; then a new order lands on each stack in turn */
main[data-seo-page="ecommerce"] .sxe-box{transition:opacity .45s ease,transform .7s var(--ease);transition-delay:calc(.25s + var(--m) * .09s + var(--b) * .05s)}
html.el8-js main[data-seo-page="ecommerce"] .sxe-orders:not(.is-in) .sxe-orders__up .sxe-box{opacity:0;transform:translateY(-14px)}
html.el8-js main[data-seo-page="ecommerce"] .sxe-orders:not(.is-in) .sxe-orders__down .sxe-box{opacity:0;transform:translateY(14px)}
main[data-seo-page="ecommerce"] .sxe-orders__stop{transition:opacity .5s ease 1.3s}
html.el8-js main[data-seo-page="ecommerce"] .sxe-orders:not(.is-in) .sxe-orders__stop{opacity:0}
main[data-seo-page="ecommerce"] .sxe-orders.is-in .sxe-box.is-new{animation:sxeLand 6.5s ease infinite;animation-delay:calc(2.4s + var(--m) * .2s)}
@keyframes sxeLand{0%,12%,100%{transform:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}4%{transform:translateY(-6px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 0 14px rgba(244,160,0,.8)}}
main[data-seo-page="ecommerce"] .sxe-orders.is-in .sxe-orders__stop i{animation:sxePausePing 2.4s ease 2s infinite}
@media (max-width:700px){
  main[data-seo-page="ecommerce"] .sxe-orders{--pad:14px;--gap:4px;--up:122px;--axis:24px;--down:32px;padding:18px var(--pad) 14px;border-radius:22px;margin-bottom:22px}
  main[data-seo-page="ecommerce"] .sxe-box{width:80%;height:12px;border-radius:2px;background:linear-gradient(180deg,#FFD27E 0 3px,#F2A818 3px,#D98E00)}
  main[data-seo-page="ecommerce"] .sxe-box::before{width:3px;margin-left:-1.5px}
  main[data-seo-page="ecommerce"] .sxe-box::after{top:3px}
  main[data-seo-page="ecommerce"] .sxe-orders__up,main[data-seo-page="ecommerce"] .sxe-orders__down{gap:2px}
  main[data-seo-page="ecommerce"] .sxe-orders__m{padding:0 2px;font-size:9.5px}
  main[data-seo-page="ecommerce"] .sxe-orders__tag{font-size:11px;padding:5px 10px}
  main[data-seo-page="ecommerce"] .sxe-orders__tag--own{top:16px}
  /* the paid-only tag sits under its row: the empty months are too narrow for it on a phone */
  main[data-seo-page="ecommerce"] .sxe-orders{display:flex;flex-direction:column}
  main[data-seo-page="ecommerce"] .sxe-orders__tag--rent{position:static;order:1;align-self:flex-end;margin-top:8px}
}

/* ---- APPROACH 3: technical SEO at scale; a crawler sweeps the catalogue and leaves it handled ---- */
main[data-seo-page="ecommerce"] .sxe-crawl{padding:40px 18px 16px;border-bottom:1px solid var(--edge);background:radial-gradient(90% 100% at 50% 0%,rgba(244,160,0,.06),transparent 70%)}
main[data-seo-page="ecommerce"] .sxe-crawl__stage{position:relative;display:grid}
main[data-seo-page="ecommerce"] .sxe-crawl__grid{grid-area:1/1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px 7px}
main[data-seo-page="ecommerce"] .sxe-tile{position:relative;display:block;height:22px;border-radius:5px;border:1px solid var(--edge-2);background:#12151A}
/* a tiny product page: its picture and a line of text */
main[data-seo-page="ecommerce"] .sxe-tile::before{content:"";position:absolute;left:4px;top:4px;width:8px;height:12px;border-radius:2px;background:rgba(255,255,255,.14);
  box-shadow:6px 0 0 -1px transparent}
main[data-seo-page="ecommerce"] .sxe-tile::after{content:"";position:absolute;left:15px;right:4px;top:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);box-shadow:0 5px 0 rgba(255,255,255,.08)}
/* before: filter duplicates stacked behind a page (coral), an out of stock page greyed out */
main[data-seo-page="ecommerce"] .sxe-crawl__grid--raw .sxe-tile.is-dup{border-color:rgba(255,122,107,.55);box-shadow:3px -3px 0 -1px #0E1015,3px -3px 0 0 rgba(255,122,107,.5),6px -6px 0 -1px #0E1015,6px -6px 0 0 rgba(255,122,107,.32)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--raw .sxe-tile.is-oos{opacity:.45;border-style:dashed}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--raw .sxe-tile.is-oos::before{background:var(--coral)}
/* after: every page indexed once, the paginated run linked, the out of stock page kept */
/* at rest only the handled catalogue shows; while the crawler runs, the raw one shows ahead of it and the handled one behind */
main[data-seo-page="ecommerce"] .sxe-crawl__grid--raw{clip-path:inset(-8px -8px -8px 100%)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit{clip-path:inset(-8px -8px -8px -8px)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit .sxe-tile{border-color:rgba(244,160,0,.42);background:rgba(244,160,0,.1)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit .sxe-tile::before{background:rgba(255,200,110,.5)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit .sxe-tile::after{background:rgba(255,220,160,.3);box-shadow:0 5px 0 rgba(255,220,160,.18)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit .sxe-tile.is-dup{border-color:var(--gold);background:rgba(244,160,0,.22);box-shadow:0 0 12px -2px rgba(244,160,0,.7)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit .sxe-tile.is-oos{border-color:var(--teal-line);background:var(--teal-soft)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit .sxe-tile.is-oos::before{background:var(--teal)}
main[data-seo-page="ecommerce"] .sxe-tile b{position:absolute;left:100%;top:50%;width:9px;height:2px;margin-top:-1px;background:var(--gold);box-shadow:0 0 6px rgba(244,160,0,.8)}
main[data-seo-page="ecommerce"] .sxe-crawl__grid--lit .sxe-tile.is-page{border-color:var(--gold)}
/* the crawler */
main[data-seo-page="ecommerce"] .sxe-crawl__beam{position:absolute;top:-8px;bottom:-8px;left:100%;width:2px;margin-left:-1px;border-radius:2px;background:var(--gold);box-shadow:0 0 12px rgba(244,160,0,.9);opacity:0}
main[data-seo-page="ecommerce"] .sxe-crawl__beam::before{content:"";position:absolute;top:0;bottom:0;right:2px;width:46px;background:linear-gradient(90deg,transparent,rgba(244,160,0,.16))}
main[data-seo-page="ecommerce"] .sxe-crawl__beam b{position:absolute;left:50%;top:-22px;display:grid;place-items:center;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--gold);color:#111;box-shadow:0 0 16px rgba(244,160,0,.7)}
main[data-seo-page="ecommerce"] .sxe-crawl__beam svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxe-crawl__beam{animation:sxeBeam 7s linear infinite}
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxe-crawl__grid--lit{animation:sxeSweep 7s linear infinite}
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxe-crawl__grid--raw{animation:sxeAhead 7s linear infinite}
@keyframes sxeBeam{0%{left:0;opacity:0}4%{opacity:1}66%{opacity:1}70%{left:100%;opacity:0}100%{left:100%;opacity:0}}
@keyframes sxeAhead{0%{clip-path:inset(-8px -8px -8px -8px)}70%,89.9%{clip-path:inset(-8px -8px -8px 100%)}90%,100%{clip-path:inset(-8px -8px -8px -8px)}}
@keyframes sxeSweep{0%{clip-path:inset(-8px 100% -8px -8px);opacity:1}70%{clip-path:inset(-8px -8px -8px -8px);opacity:1}90%{clip-path:inset(-8px -8px -8px -8px);opacity:1}97%,100%{clip-path:inset(-8px -8px -8px -8px);opacity:0}}
/* the three fixes, each with its mark from the catalogue */
main[data-seo-page="ecommerce"] .sxe-fix__t{display:inline-flex;align-items:center;gap:11px;min-width:0}
main[data-seo-page="ecommerce"] .sxe-fix__t i{position:relative;flex:0 0 auto;width:16px;height:12px;border-radius:3px;border:1px solid var(--gold-line);background:var(--gold-soft)}
main[data-seo-page="ecommerce"] .sxe-fix__t i.is-dup{box-shadow:3px -3px 0 -1px #0E1015,3px -3px 0 0 rgba(255,122,107,.6)}
main[data-seo-page="ecommerce"] .sxe-fix__t i.is-page{width:8px;margin-right:8px;border-color:var(--gold)}
main[data-seo-page="ecommerce"] .sxe-fix__t i.is-page::after{content:"";position:absolute;left:100%;top:50%;width:5px;height:2px;margin-top:-1px;background:var(--gold);box-shadow:5px -3px 0 3px transparent}
main[data-seo-page="ecommerce"] .sxe-fix__t i.is-page::before{content:"";position:absolute;left:calc(100% + 5px);top:-1px;width:8px;height:12px;border-radius:3px;border:1px solid var(--gold);background:var(--gold-soft)}
main[data-seo-page="ecommerce"] .sxe-fix__t i.is-oos{border-color:var(--teal-line);background:var(--teal-soft)}
main[data-seo-page="ecommerce"] .sxe-fix__t i.is-oos::before{content:"";position:absolute;left:3px;top:3px;width:4px;height:4px;border-radius:50%;background:var(--teal)}
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxe-fix b{animation:sxvPop 7s ease infinite;animation-delay:calc(var(--i) * 1.4s + 1.2s)}
@media (max-width:700px){
  main[data-seo-page="ecommerce"] .sxe-crawl{padding:38px 12px 12px}
  main[data-seo-page="ecommerce"] .sxe-crawl__grid{gap:6px 5px}
  main[data-seo-page="ecommerce"] .sxe-tile{height:18px;border-radius:4px}
  main[data-seo-page="ecommerce"] .sxe-tile::before{left:3px;top:3px;width:6px;height:10px}
  main[data-seo-page="ecommerce"] .sxe-tile::after{display:none}
  main[data-seo-page="ecommerce"] .sxe-tile b{width:5px}
}