/* Ocelot: reverse logistics conveyor
   Sits in the "We save you money on freight" section (#why).
   Colors match the site: forest #0F2219, gold #C8832A, soft gold #E0A64B, cream #F4EFE6. */

.rlb{position:relative;height:590px;margin-top:40px}
/* a closed explanation panel near the right edge must not make the page scroll sideways */
[data-reverse-logistics]{overflow-x:clip}
.rlb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}

/* center: reverse logistics */
.rlb-hubwrap{position:absolute;left:50%;top:50%;width:320px;transform:translate(-50%,-50%);z-index:30}
.rlb.hub-open .rlb-hubwrap{z-index:60}
.rlb.card-open .rlb-hubwrap{opacity:.35;transition:opacity .25s}
/* cream paper on the dark green, so the center box pops */
.rlb-hub{position:relative;text-align:center;border-radius:16px;padding:22px 26px 18px;outline:none;cursor:default;background:linear-gradient(180deg,#FBF8F1,#F1EADC);border:1.5px solid #C8832A;box-shadow:0 26px 50px -22px rgba(0,0,0,.85),0 0 0 6px rgba(200,131,42,.14);transition:transform .18s ease,border-color .18s ease}
.rlb-hub::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(168,103,28,.45);border-radius:11px;pointer-events:none}
.rlb-hub:focus-visible{box-shadow:0 0 0 3px #E0A64B}
.rlb-hub.bump{transform:scale(1.03);border-color:#E0A64B}
.rlb-top{display:flex;align-items:center;justify-content:center;gap:9px}
.rlb-kick{font:700 11px Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#A8671C}
.rlb-icon{width:26px;height:26px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid rgba(168,103,28,.55)}
.rlb-icon svg{width:15px;height:15px}
.rlb-icon svg path{stroke:#A8671C}
.rlb-live .rlb-icon svg{animation:rlbSpin 6s linear infinite}
@keyframes rlbSpin{to{transform:rotate(-360deg)}}
.rlb-hub h3{font-family:"Zilla Slab",serif;font-size:34px;line-height:1.04;font-weight:700;color:#0F2219;margin:10px 0 0}
.rlb-hint{font:600 11px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7A6A52;margin-top:10px}
.rlb-hub.open .rlb-hint{display:none}
.rlb-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}
.rlb-hub.open .rlb-more{grid-template-rows:1fr;opacity:1}
.rlb-more-in{overflow:hidden;min-height:0}
.rlb-lead{font-size:14px;line-height:1.55;color:#3A463F;margin:12px 0 0}
.rlb-mini{list-style:none;padding:0;margin:14px 0 4px;display:grid;gap:8px;text-align:left}
.rlb-mini li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;font-size:13px;line-height:1.35;color:#15110D}
.rlb-mini .n{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font:700 12px "Zilla Slab",serif;color:#A8671C;border:1px solid rgba(168,103,28,.55);transition:background .3s,color .3s}
.rlb-mini li.on .n{background:#C8832A;color:#0F2219}

/* the four topics as shipping boxes (all the same size) */
.rlb-card{position:absolute;left:0;top:0;width:262px;height:88px;z-index:20;cursor:pointer;outline:none}
.rlb-box{position:absolute;inset:0;border-radius:5px;transition:transform .25s ease,box-shadow .25s ease;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),linear-gradient(160deg,#C99D60 0%,#B98A4E 55%,#A67841 100%);
  box-shadow:0 16px 24px -14px rgba(0,0,0,.95),inset 0 0 0 1px rgba(70,42,12,.45),inset 0 -3px 0 rgba(0,0,0,.14)}
.rlb-tape{position:absolute;left:0;right:0;top:50%;height:24px;transform:translateY(-50%);background:linear-gradient(180deg,rgba(222,186,132,.95),rgba(201,160,102,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.18)}
.rlb-label{position:absolute;left:12px;right:12px;top:11px;bottom:11px;background:#F8F3E9;border-radius:3px;display:flex;align-items:center;gap:8px;padding:0 9px 0 8px;box-shadow:0 1px 1.5px rgba(0,0,0,.35)}
.rlb-lic{flex:none;width:24px;height:24px;border-radius:5px;display:grid;place-items:center;background:#0F2219}
.rlb-lic svg{width:14px;height:14px}
.rlb-label h4{flex:1;font-family:"Zilla Slab",serif;font-size:13.5px;line-height:1.16;font-weight:700;color:#0F2219;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rlb-code{flex:none;width:15px;align-self:stretch;margin:9px 0;background:repeating-linear-gradient(90deg,#0F2219 0 1.5px,transparent 1.5px 3px,#0F2219 3px 5px,transparent 5px 6.5px);opacity:.8}
.rlb-card.open .rlb-box,.rlb-card:focus-visible .rlb-box{transform:translateY(-4px);box-shadow:0 24px 30px -14px rgba(0,0,0,.95),0 0 0 2px #E0A64B,inset 0 0 0 1px rgba(70,42,12,.45)}
.rlb-card.open{z-index:45}

/* the boxes: a real carton, front + top + side, with a shipping label on the front */
.rlb-cube{display:none}
[data-box="cube"] .rlb-card{width:198px;height:134px}
[data-box="cube"] .rlb-box{background:none;box-shadow:none;border-radius:0}
[data-box="cube"] .rlb-tape{display:none}
[data-box="cube"] .rlb-cube{display:block;position:absolute;left:0;top:0;width:198px;height:134px;overflow:visible}
/* the label: a black SHIP TO band with the topic icon, the title set like a bold address, a slim barcode, a lifting corner */
[data-box="cube"] .rlb-label{left:8px;top:33px;right:auto;bottom:auto;width:160px;height:94px;padding:0 0 7px;border-radius:3px;overflow:hidden;
  display:grid;grid-template-columns:1fr;grid-template-rows:20px 1fr 9px;gap:5px 0;align-items:stretch;
  background:linear-gradient(165deg,#FFFFFE 0%,#F7F3EA 100%);box-shadow:0 1px 1px rgba(40,24,6,.45),0 4px 6px -4px rgba(40,24,6,.55)}
[data-box="cube"] .rlb-label::before{content:"Ship to";grid-column:1;grid-row:1;display:flex;align-items:center;padding-left:8px;background:#15110D;font:800 8px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#FBF8F1}
[data-box="cube"] .rlb-label::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;background:linear-gradient(315deg,#B8894F 50%,#E2D7C2 50%);box-shadow:-1px -1px 1.5px rgba(40,24,6,.3)}
/* each topic keeps its own icon, bigger than before, gold on the black band */
[data-box="cube"] .rlb-lic{grid-column:1;grid-row:1;justify-self:end;align-self:center;width:16px;height:16px;margin-right:6px;border-radius:0;background:none}
[data-box="cube"] .rlb-lic svg{display:block;width:15px;height:15px}
[data-box="cube"] .rlb-label h4{grid-column:1;grid-row:2;align-self:center;margin:0 8px;padding-left:7px;border-left:3px solid #15110D;font-size:13.5px;line-height:1.12;-webkit-line-clamp:3;color:#15110D}
[data-box="cube"] .rlb-code{grid-column:1;grid-row:3;width:auto;margin:0 8px 0 18px;opacity:1;
  background:repeating-linear-gradient(90deg,#15110D 0 2px,transparent 2px 3px,#15110D 3px 4px,transparent 4px 6px,#15110D 6px 9px,transparent 9px 10px,#15110D 10px 11px,transparent 11px 13px,#15110D 13px 14px,transparent 14px 16px,#15110D 16px 18px,transparent 18px 19px,#15110D 19px 20px,transparent 20px 23px)}
[data-box="cube"] .rlb-card.open .rlb-box,[data-box="cube"] .rlb-card:focus-visible .rlb-box{box-shadow:none}
[data-box="cube"] .rlb-card.open .cube-ol,[data-box="cube"] .rlb-card:focus-visible .cube-ol{stroke:#E0A64B;stroke-opacity:1;stroke-width:2}

/* opening the box: the packing slip with the description comes out between the flaps (JS drives the motion) */
.rlb-slipwrap{display:none}
/* the packing slip. In the box it's shown small, just its top peeking out (JS scales and lifts it);
   on desktop a full-size copy then flies to the middle of the belt and unfolds */
[data-box="cube"] .rlb-slipwrap{display:block;position:absolute;left:-72px;bottom:104px;width:320px;height:420px;overflow:hidden;pointer-events:none}
.rlb-slip{position:absolute;left:0;bottom:0;width:320px;padding:0 0 22px;border-radius:3px;text-align:left;transform-origin:50% 100%;transform:translateY(110%) scale(.52);
  background:#FBF8F1;color:#26332C;box-shadow:inset 0 -26px 20px -18px rgba(60,36,10,.3);
  -webkit-mask:radial-gradient(circle at 6px 0,transparent 3px,#000 3.6px) 0 0/12px 100%;mask:radial-gradient(circle at 6px 0,transparent 3px,#000 3.6px) 0 0/12px 100%}
/* a gold band on top, so the slip stands out from the dark green section */
.ps-head{display:flex;align-items:center;justify-content:space-between;height:40px;padding:5px 16px 0;background:linear-gradient(180deg,#E0A64B,#CD8A30);box-shadow:inset 0 -1px 0 rgba(90,55,12,.35);color:#0F2219;font:800 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.ps-head b{font:700 15px/1 "Zilla Slab",Georgia,serif;letter-spacing:.08em;color:#0F2219}
.ps-item{display:grid;grid-template-columns:34px 1fr 22px;align-items:center;gap:12px;margin:14px 16px 0;padding-bottom:12px;border-bottom:1.5px solid #15110D}
.ps-ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#10261B}
.ps-ic svg{width:19px;height:19px}
.ps-item strong{font:700 17px/1.15 "Zilla Slab",Georgia,serif;color:#15110D}
.ps-check{width:22px;height:22px;border-radius:50%;background:#C8832A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%230F2219' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ps-body{margin:12px 16px 0;font:500 13.5px/1.55 Inter,system-ui,sans-serif;color:#2B3731}
/* room above the belt for the flaps of a top-row box */
[data-box="cube"] .rlb:not(.rlb-stack){margin-top:84px}
/* while a box is open, the others step back */
[data-box="cube"] .rlb.card-open .rlb-card:not(.lifted){filter:brightness(.6) saturate(.85);transition:filter .3s}
.rlb-flyer{display:none}
[data-box="cube"] .rlb:not(.rlb-stack) .rlb-flyer{display:block;position:absolute;left:0;top:0;z-index:70;width:320px;visibility:hidden;pointer-events:none;transform-origin:50% 0;filter:drop-shadow(0 24px 28px rgba(0,0,0,.55))}
.rlb-flyer .rlb-slip{position:relative;transform:none;padding-bottom:18px;box-shadow:none}
/* packing peanuts that puff out of the box */
.rlb-peanut{position:absolute;z-index:65;width:10px;height:7px;margin:-3.5px 0 0 -5px;border-radius:5px 5px 4px 4px/4px 4px 3px 3px;background:#F2E7CF;box-shadow:inset -1px -1px 0 rgba(120,90,50,.35);pointer-events:none;animation:rlbPeanut 1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes rlbPeanut{0%{transform:translate(0,0) rotate(0) scale(.5);opacity:0}12%{opacity:1}45%{transform:translate(var(--ux),var(--uy)) rotate(calc(var(--r) * .5)) scale(1)}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.9);opacity:0}}
.rlb-card.open .rlb-slip{pointer-events:auto}
[data-box="cube"] .rlb-card.lifted{z-index:45}

/* phones and narrow screens: the boxes ride a straight belt down the page, and it ends in the center box. tap to open */
.rlb-vbelt,.rlb-vin,.rlb-vparcels{display:none}
.rlb.rlb-stack{height:auto;display:grid;gap:34px;padding-top:34px;margin-top:30px}
.rlb-stack .rlb-svg{display:none}
.rlb-stack .rlb-hubwrap,.rlb-stack .rlb-card{position:relative;left:auto;top:auto;transform:none!important;width:auto;height:auto}
.rlb-stack .rlb-card{margin:0 8px}
.rlb-stack .rlb-hubwrap{order:1;opacity:1!important}
.rlb-stack .rlb-vbelt{display:block;position:absolute;left:50%;top:0;width:44px;margin-left:-22px;z-index:1;
  border:2px solid #7C8388;border-bottom:0;border-radius:22px 22px 0 0;background-color:#2A2B2E;background-repeat:repeat-y;background-position:center 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cpath d='M14 8.5l6 6.5 6-6.5' fill='none' stroke='%23E0A64B' stroke-opacity='.85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 56px);mask-image:linear-gradient(to bottom,transparent,#000 56px)}
[data-belt="rollers"] .rlb-stack .rlb-vbelt{background-color:#26262A;border-color:#8A6A3C;background-image:linear-gradient(to bottom,transparent 0 3px,#c9c1ad 3px 7px,transparent 7px);background-size:30px 12px}
[data-belt="smooth"] .rlb-stack .rlb-vbelt{background-image:linear-gradient(to bottom,rgba(244,239,230,.14) 0 16px,transparent 16px);background-size:2px 36px}
.rlb-stack .rlb-vparcels{display:block;position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.rlb-vparcel{position:absolute;left:50%;top:0;width:22px;height:18px;border-radius:2px;will-change:transform;
  background:linear-gradient(#D9B77F,#D9B77F) center/100% 5px no-repeat,#B98A4E;box-shadow:inset 0 0 0 .8px #6B4A22,0 4px 6px -3px rgba(0,0,0,.7)}
.rlb-vparcel::after{content:"";position:absolute;left:6px;top:3.5px;width:9px;height:6px;border-radius:1px;background:#F8F3E9}
.rlb-stack .rlb-vin{display:grid;justify-items:center;align-content:center;position:absolute;left:50%;width:44px;margin-left:-22px;height:34px;z-index:4;pointer-events:none}
.rlb-vin i{display:block;width:11px;height:11px;margin-top:-3px;border-right:2.6px solid #E0A64B;border-bottom:2.6px solid #E0A64B;transform:rotate(45deg)}
.rlb-live .rlb-vin i{animation:rlbIn 1.1s ease-in-out infinite alternate}
.rlb-live .rlb-vin i+i{animation-delay:-.55s}
@keyframes rlbIn{from{opacity:.25}to{opacity:1}}
.rlb-stack .rlb-hub::before{content:"";position:absolute;left:50%;top:-2px;width:40px;margin-left:-20px;height:7px;background:#2A2B2E;border-radius:0 0 7px 7px}
[data-box="cube"] .rlb-stack .rlb-card{height:auto}
[data-box="cube"] .rlb-stack .rlb-box{width:198px;height:134px;margin:0 auto}
/* phones: the slip rises full size, centered on the box, its bottom tapered to fit the opening */
[data-box="cube"] .rlb-stack .rlb-slipwrap{left:-61px}
[data-box="cube"] .rlb-stack .rlb-slip{transform:translateY(110%);padding-bottom:44px;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 85px) calc(100% - 18px),calc(100% - 85px) 100%,63px 100%,63px calc(100% - 18px),0 calc(100% - 34px))}
.rlb-stack .rlb-box{position:relative;inset:auto;height:88px}
.rlb-stack .rlb-card.open .rlb-box{transform:none}