/* EON PDP cross-sell carousel ("More to explore."). GENERATED by tools/crosssell/apply-crosssell.mjs from tools/crosssell/crosssell.mjs: edit the module, never this file. */
.cs{--cs-w:220px;--cs-gap:16px;--cs-ih:286px;--cs-vw:92px;--cs-vh:196px;--cs-vtop:36px;--cs-bleed:calc((100vw - 100%)/2);
  --cs-line:#DCE4EC;--cs-mute:#56708A;
  position:relative;margin:clamp(2rem,3.4vw,3rem) 0 clamp(1.9rem,3.2vw,2.8rem);padding:0}
.cs *{box-sizing:border-box}
/* class tints: t1 top, t2 bottom, td = the class's solid tone (dot, hover edge) */
[data-cs-tint=paper]{--t1:#EEF2F6;--t2:#D5DFE9;--td:#7F97AE}
[data-cs-tint=slate]{--t1:#E2EBF4;--t2:#BFD2E4;--td:#3A5D7A}
[data-cs-tint=blend]{--t1:#DDE6EE;--t2:#B9CBD3;--td:#1F3546}
[data-cs-tint=teal]{--t1:#DCEFEC;--t2:#B4D9D3;--td:#3E8F87}
[data-cs-tint=sand]{--t1:#F4ECDD;--t2:#E4D2AE;--td:#A9843F}
[data-cs-tint=rose]{--t1:#F6E7E6;--t2:#E6C4C3;--td:#AE6A6A}
[data-cs-tint=lilac]{--t1:#E9E7F4;--t2:#CCC7E6;--td:#7169A8}
[data-cs-tint=sage]{--t1:#E9F0E0;--t2:#CBDBB6;--td:#6F8F4E}
[data-cs-tint=blend] .cs-card__media{background:radial-gradient(62% 50% at 50% 34%,rgba(255,255,255,.94),rgba(255,255,255,0) 72%),linear-gradient(135deg,#C3D3E2 0%,#DDE6EE 46%,#BFDCD6 100%)}

.cs__head{display:block;margin:0 0 clamp(.9rem,1.5vw,1.3rem)}
.cs__eyebrow{display:flex;align-items:flex-start;gap:.65em;margin:0 0 .75rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;color:var(--cs-mute)}
.cs__eyebrow i{flex:none;width:7px;height:7px;margin-top:.27em;border-radius:50%;background:var(--td);box-shadow:0 0 0 3px color-mix(in srgb,var(--td) 22%,transparent)}
.cs__eyebrow span{color:inherit}
.cs__h{margin:0;font-size:clamp(1.6rem,1.12rem + 1.55vw,2.25rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ink,#15201E)}
.cs__h em{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic;letter-spacing:-.045em;color:#436381}

.cs__rail{position:relative}
.cs__track{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:var(--cs-w);gap:var(--cs-gap);align-items:stretch;
  /* full bleed on BOTH sides: the heading stays in the container, the cards run edge to edge */
  --cs-pad:clamp(20px,5vw,72px);margin:0 calc(-1*var(--cs-bleed));padding:8px var(--cs-pad) 28px var(--cs-pad);scroll-padding-left:var(--cs-pad);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cs__track::-webkit-scrollbar{display:none}
.cs__track:focus-visible{outline:2px solid var(--accent,#3A5D7A);outline-offset:-2px;border-radius:24px}
.cs__rail.is-scrolled .cs__track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px);mask-image:linear-gradient(90deg,transparent 0,#000 34px)}

.cs__arrow{position:absolute;z-index:3;top:calc(8px + var(--cs-ih)/2);display:none;place-items:center;width:46px;height:46px;margin:-23px 0 0;padding:0;border:1px solid #CBD7E3;border-radius:50%;background:#fff;color:var(--accent-press,#2E4B63);cursor:pointer;
  box-shadow:0 1px 2px rgba(16,39,64,.08),0 12px 26px -10px rgba(16,39,64,.42);transition:opacity .2s ease,transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.cs__arrow svg{width:19px;height:19px}
.cs__arrow--prev{left:calc(12px - var(--cs-bleed))}.cs__arrow--prev svg{transform:rotate(180deg)}.cs__arrow--next{right:calc(12px - var(--cs-bleed))}
.cs__arrow:hover{background:var(--accent,#3A5D7A);border-color:var(--accent,#3A5D7A);color:#fff;transform:scale(1.05)}
.cs__arrow:focus-visible{outline:2px solid var(--accent,#3A5D7A);outline-offset:3px}
.cs__arrow:disabled{opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:881px) and (hover:hover) and (pointer:fine){.cs__arrow{display:grid}}

.cs-card{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;scroll-snap-align:start;border:1px solid var(--cs-line);border-radius:20px;background:#fff;overflow:hidden;isolation:isolate;
  box-shadow:0 1px 2px rgba(16,39,64,.05),0 16px 30px -24px rgba(16,39,64,.38);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .2s ease,box-shadow .35s ease}
.cs-card:hover,.cs-card:focus-within{border-color:color-mix(in srgb,var(--td) 55%,#fff);box-shadow:0 1px 2px rgba(16,39,64,.06),0 22px 34px -22px rgba(16,39,64,.5)}
@media (hover:hover){.cs-card:hover{transform:translateY(-3px)}}
.cs-card__media{position:relative;height:var(--cs-ih);overflow:hidden;background:radial-gradient(62% 50% at 50% 34%,rgba(255,255,255,.94),rgba(255,255,255,0) 72%),linear-gradient(180deg,var(--t1) 0%,var(--t2) 100%)}
.cs-card__media::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(31,53,70,.055) 1px,transparent 1px) 0 -1px/27px 27px,linear-gradient(90deg,rgba(31,53,70,.055) 1px,transparent 1px) -1px 0/27px 27px;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 78%);mask-image:linear-gradient(180deg,#000 0,transparent 78%)}
.cs-card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--td);opacity:.9}
.cs-card__img{position:absolute;inset:0;display:block}
.cs-card__vial{position:absolute;left:50%;top:12px;height:calc(var(--cs-ih) - 30px);width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 18px 16px rgba(22,36,47,.24));transition:transform .6s cubic-bezier(.16,1,.3,1)}
/* the spinning v3 vial: a fixed 92x196 box (same scale and baseline on every card), the still first, the canvas over it once its first frame is drawn.
   The shadows belong to the card, not the vial, so they stay put while the vial lifts on hover and nothing is filtered per frame. */
.cs-card__img::before,.cs-card__img::after{content:"";position:absolute;left:50%;pointer-events:none;border-radius:50%}
.cs-card__img::before{top:calc(var(--cs-vtop) + var(--cs-vh) - 13px);width:calc(var(--cs-vw)*1.9);height:34px;margin-left:calc(var(--cs-vw)*-.95);background:radial-gradient(closest-side,rgba(22,36,47,.20),rgba(22,36,47,.07) 55%,rgba(22,36,47,0))}
.cs-card__img::after{top:calc(var(--cs-vtop) + var(--cs-vh) - 7px);width:calc(var(--cs-vw)*1.12);height:12px;margin-left:calc(var(--cs-vw)*-.56);background:radial-gradient(closest-side,rgba(16,28,38,.55),rgba(16,28,38,.22) 58%,rgba(16,28,38,0))}
.cs-card__img:not(:has(.cs-vial))::before,.cs-card__img:not(:has(.cs-vial))::after{display:none}
.cs-vial{position:absolute;z-index:1;left:50%;top:var(--cs-vtop);display:block;width:var(--cs-vw);height:var(--cs-vh);margin-left:calc(var(--cs-vw)/-2);transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.cs-card:hover .cs-vial{transform:translateY(-4px)}}
.cs-vial__still,.cs-vial__spin{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none}
.cs-vial__spin{visibility:hidden}
/* the source video: in the DOM and laid out (iOS will not decode a detached one reliably), never seen, never focusable */
.cs-vial__src{position:absolute;left:0;top:0;width:2px;height:2px;max-width:none;opacity:0;pointer-events:none}
.cs-card.is-spin .cs-vial__spin{visibility:visible}.cs-card.is-spin .cs-vial__still{visibility:hidden}
.cs-card__vial--photo{left:0;top:0;width:100%;height:100%;object-fit:cover;transform:scale(1.22);mix-blend-mode:multiply;filter:none}
@media (hover:hover){.cs-card:hover .cs-card__vial--photo{transform:scale(1.26)}}
.cs-card__offer,.cs-card__size{position:absolute;top:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.04em;line-height:1;white-space:nowrap}
.cs-card__offer{left:10px;display:none;background:#16242F;color:#fff;text-transform:uppercase}
.cs-card__offer svg{width:11px;height:11px;color:#A9C0D6}.cs-card__offer b{font-weight:600}
.cs--offer .cs-card__offer{display:inline-flex}
.cs-card__size{right:10px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#2E4B63;font-weight:500}
.cs-card__coa{position:absolute;left:9px;right:9px;bottom:12px;z-index:2;display:flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 8px;border:1px solid rgba(255,255,255,.95);border-radius:999px;background:rgba(255,255,255,.97);color:var(--ink,#15201E)!important;text-decoration:none!important;white-space:nowrap;
  box-shadow:0 1px 2px rgba(16,39,64,.10),0 10px 20px -10px rgba(16,39,64,.45);transition:box-shadow .2s ease,transform .2s ease}
.cs-card__coa:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(16,39,64,.12),0 14px 24px -10px rgba(16,39,64,.55)}
.cs-card__coa:focus-visible,.cs-card__name a:focus-visible{outline:2px solid var(--accent,#3A5D7A);outline-offset:2px}
.cs-card__coa .cs-ok{flex:none;width:18px;height:18px;color:var(--success,#1D7A4C)}
.cs-card__coa b{font-family:var(--font-mono);font-size:.8125rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cs-card__coa span{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:.75rem;font-weight:600;color:var(--accent-press,#2E4B63)}
.cs-card__coa span svg{width:10px;height:10px}
.cs-card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:14px 14px 14px}
.cs-card__cls{display:flex;align-items:center;gap:7px;min-width:0;margin:0 0 8px;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.03em;line-height:1.2;text-transform:uppercase;color:var(--cs-mute);white-space:nowrap}
.cs-card__cls i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--td)}
.cs-card__name{margin:0 0 5px;font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink,#15201E)}
.cs-card__name a{color:inherit!important;text-decoration:none!important}
.cs-card__name a:hover{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1px!important}
.cs-card__desc{margin:0 0 13px;font-size:.8125rem;line-height:1.35;color:var(--ink-3,#5F6A65);text-wrap:balance}
.cs-card__buy{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid #E8EDF2}
.cs-card__price{display:flex;flex-direction:column;gap:4px;margin:0 0 2px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink,#15201E)}
.cs-card__price small{font-size:.6875rem;font-weight:500;letter-spacing:.1em;line-height:1;text-transform:uppercase;color:var(--ink-3,#5F6A65)}
.cs-card__add{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:84px;height:38px;margin:0;padding:0 15px 0 12px;border:0;border-radius:999px;background:var(--accent,#3A5D7A);color:#fff;font:600 .8125rem/1 var(--font-sans,inherit);letter-spacing:.01em;cursor:pointer;transition:background-color .2s ease,transform .15s ease}
.cs-card__add svg{flex:none;width:12px;height:12px}.cs-card__add .cs-tick{display:none}
.cs-card__add:hover{background:var(--accent-press,#2E4B63)}.cs-card__add:active{transform:scale(.97)}
.cs-card__add:focus-visible{outline:2px solid var(--accent,#3A5D7A);outline-offset:3px}
.cs-card__add.is-added{background:var(--success,#1D7A4C)}.cs-card__add.is-added .cs-plus{display:none}.cs-card__add.is-added .cs-tick{display:block}
/* runtime truth (crosssell.js sync): a card whose product has since gone hidden or sold out, a "from" that no longer applies */
.cs[hidden],.cs-card[hidden],.cs-card__size[hidden],.cs-card__price small[hidden]{display:none}
.cs__note{margin:0;max-width:78ch;font-size:.75rem;line-height:1.5;color:var(--ink-3,#5F6A65)}
.cs__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* tablets and phones: the rail runs edge to edge, the first card starts on the page gutter, the next one peeks */
@media (max-width:880px){.cs__track{margin-left:calc(-1*var(--gutter,20px));padding-left:var(--gutter,20px);scroll-padding-left:var(--gutter,20px)}.cs__rail.is-scrolled .cs__track{-webkit-mask-image:none;mask-image:none}}
@media (max-width:640px){
  .cs{--cs-w:64vw;--cs-gap:12px;--cs-ih:288px;margin:1.7rem 0 1.7rem}
  .cs__eyebrow{margin-bottom:.6rem;letter-spacing:.12em}.cs__h{font-size:1.65rem}
  .cs__track{padding-bottom:24px}
  .cs-card__add{height:42px;min-width:92px;padding:0 17px 0 14px;font-size:.875rem}
  .cs-card__coa{height:36px}
}
@media (prefers-reduced-motion:reduce){.cs-card,.cs-card__vial,.cs-vial,.cs__arrow{transition:none!important}.cs-card:hover{transform:none}.cs-card:hover .cs-card__vial{transform:translateX(-50%)}.cs-card:hover .cs-vial{transform:none}}