/* Original knitted Mugsocks world. Campaign styles are scoped away from checkout. */
.sockworld { --world-ink:#173a58; --world-pink:#bd205d; color:var(--world-ink); background:#fffdf7; overflow:hidden; }
.sockworld h1,.sockworld h2,.sockworld h3 { font-family:'Trebuchet MS','Avenir Next',sans-serif; letter-spacing:-.04em; }
.sockworld-hero { position:relative; isolation:isolate; min-height:650px; max-width:1600px; margin:0 auto; background:#e0f2fb; }
.sockworld-landscape { position:absolute; inset:0 0 0 27%; z-index:-2; }
.sockworld-landscape img { width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.sockworld-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#f1fbff 0%,#f1fbfff5 22%,#f1fbffb8 38%,transparent 57%); }
.sockworld-copy { width:47%; padding:70px 0 80px max(28px,calc((100vw - 1230px)/2)); max-width:700px; }
.sockworld-kicker { text-transform:uppercase; font-size:12px; font-weight:850; letter-spacing:.15em; color:#236a76; margin:0 0 18px; }
.sockworld-copy h1 { font-size:clamp(36px,4.1vw,62px); line-height:1.04; margin:0 0 24px; }
.sockworld-copy h1 em { color:var(--world-pink); font-style:normal; }
.sockworld-copy>p:not(.sockworld-kicker) { max-width:360px; font-size:17px; line-height:1.65; }
.sockworld-offer { width:fit-content; max-width:100%; padding:9px 14px; background:#fff0a8; color:#58401b; border:1px dashed #c9a338; border-radius:12px; font-size:16px; font-weight:800; margin:22px 0; transform:rotate(-2deg); }
.sockworld .sockworld-cta { display:inline-flex; align-items:center; gap:18px; padding:15px 24px; border:0; border-radius:30px; background:#bf245f; color:white; font-weight:800; box-shadow:0 5px 0 #861540; min-height:48px; text-decoration:none; }
.sockworld .sockworld-cta:hover { background:#a81c50; transform:translateY(-1px); }
.sockworld a:focus-visible { outline:3px solid #173a58; outline-offset:5px; }
.sockworld-how { display:block; width:fit-content; font-size:14px; margin-top:22px; text-decoration:underline; text-underline-offset:4px; font-weight:700; }
.sockworld-copy small { display:block; max-width:340px; margin-top:20px; font-size:11px; line-height:1.5; color:#415868; }
.sockworld-location { position:absolute; bottom:18px; right:24px; background:#fffef4ee; border-radius:30px; padding:7px 14px; font-size:11px; color:#173a58; font-weight:800; }
.sockworld-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1250px; padding:30px 24px 50px; margin:0 auto; position:relative; }
.sockworld-panel { padding:28px; border-radius:26px 26px 40px 26px; position:relative; box-shadow:0 5px 0 #173a5810; transition:transform .2s; }
.sockworld-panel:hover { transform:translateY(-4px); }
.panel-peach { background:#ffe2d7; } .panel-yellow { background:#fff0b5; } .panel-mint { background:#d7eee4; }
.panel-eyebrow { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:850; margin-bottom:15px; padding-right:25px; }
.sockworld-panel h2 { font-size:29px; line-height:1.1; margin:0 0 15px; }
.sockworld-panel p { font-size:14px; max-width:260px; margin:0 0 20px; line-height:1.6; }
.panel-symbol { position:absolute; right:25px; top:18px; font-size:34px; color:#a34643; }
.panel-link { font-size:13px; font-weight:850; text-decoration:underline; text-underline-offset:4px; }
.sockworld-journey { position:relative; padding:65px 24px 80px; background:#e7f3ed; text-align:center; border-radius:50% 50% 0 0 / 35px 35px 0 0; scroll-margin-top:100px; }
.sockworld-journey h2 { font-size:clamp(32px,4vw,48px); margin:0 0 50px; }
.sockworld-journey ol { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; max-width:1170px; margin:0 auto 34px; position:relative; }
.sockworld-journey ol::before { content:''; position:absolute; top:30px; left:10%; right:10%; border-top:3px dashed #779f8a; }
.sockworld-journey li { position:relative; }
.sockworld-journey li:nth-child(even) { padding-top:22px; }
.sockworld-journey li>span { display:grid; place-items:center; width:62px; height:62px; border-radius:22px; background:#fff9e3; border:3px solid white; box-shadow:0 6px 0 #bed5c9; margin:0 auto 23px; font-size:24px; font-weight:900; color:#9b344c; transform:rotate(-6deg); }
.sockworld-journey li:nth-child(even)>span { transform:rotate(6deg); background:#ffe1d5; }
.sockworld-journey h3 { font-size:21px; letter-spacing:-.02em; }
.sockworld-journey li p { font-size:14px; line-height:1.65; max-width:240px; margin:0 auto; }
.sockworld .live-intro-section { padding-top:75px; }
.sockworld .product-card { border-radius:22px; overflow:hidden; background:white; }
.sockworld .product-section { background:#fffdf7; }
.sockworld .home-section-heading h2 { color:#173a58; }
.sockworld .reviews-band { background:#e9f3fc; border-radius:50% 50% 0 0 / 30px 30px 0 0; }
.sockworld .review-card { border-radius:22px; }
.sockworld .home-image-band { border-radius:24px; overflow:hidden; margin:24px auto; max-width:1250px; }
.mascot-launcher.chat-launcher { width:90px; height:100px; border-radius:24px; background:transparent; box-shadow:none; position:relative; }
.mascot-launcher.chat-launcher:hover { background:transparent; transform:translateY(-2px); }
.purly-sprite { display:block; width:90px; height:90px; background-image:url('/static/storefront/images/sockworld/purly-sprites.webp'); background-size:300% 200%; background-repeat:no-repeat; background-position:0 0; filter:drop-shadow(0 4px 4px #16385425); pointer-events:none; }
.purly-sprite[data-mascot-frame='1'] { background-position:50% 0; }
.purly-sprite[data-mascot-frame='2'] { background-position:100% 0; }
.purly-sprite[data-mascot-frame='3'] { background-position:0 100%; }
.purly-sprite[data-mascot-frame='4'] { background-position:50% 100%; }
.purly-sprite[data-mascot-frame='5'] { background-position:100% 100%; }
.mascot-launcher.chat-launcher[data-mascot-action] .purly-sprite { will-change:translate,rotate; }
.mascot-launcher.chat-launcher[data-mascot-action='peek'] .purly-sprite { animation:mascot-idle-peek 1s ease-in-out both; }
.mascot-launcher.chat-launcher[data-mascot-action='hop'] .purly-sprite { animation:mascot-idle-hop 1.2s ease-in-out both; }
.mascot-launcher.chat-launcher[data-mascot-action='spin'] .purly-sprite { animation:mascot-idle-spin 1.4s ease-in-out both; }
.mascot-launcher.chat-launcher[data-mascot-action='handstand'] .purly-sprite { transform-origin:50% 50%; animation:mascot-idle-handstand 1.8s ease-in-out both; }
.mascot-launcher.chat-launcher[data-mascot-action='juggle'] .purly-sprite { animation:mascot-idle-juggle 1.68s ease-in-out both; }
.mascot-launcher.chat-launcher[data-mascot-action='cheer'] .purly-sprite { animation:mascot-idle-cheer 1s ease-in-out both; }
.mascot-launcher.chat-launcher[data-mascot-action='juggle']::before,
.mascot-launcher.chat-launcher[data-mascot-action='juggle']::after { content:''; position:absolute; z-index:1; top:22%; width:8px; height:8px; border:1px solid #fff; border-radius:50%; box-shadow:0 2px 3px #173a5840; pointer-events:none; }
.mascot-launcher.chat-launcher[data-mascot-action='juggle']::before { left:18%; background:#f1c64b; animation:mascot-juggle-left .7s ease-in-out infinite alternate; }
.mascot-launcher.chat-launcher[data-mascot-action='juggle']::after { right:18%; background:#ec86ad; animation:mascot-juggle-right .7s ease-in-out infinite alternate; }
@keyframes mascot-idle-peek { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
@keyframes mascot-idle-hop { 0%,100% { translate:0 0; rotate:0deg; } 22% { translate:0 -12px; rotate:-9deg; } 46% { translate:0 0; rotate:8deg; } 66% { translate:0 -6px; rotate:-5deg; } 84% { translate:0 0; rotate:3deg; } }
@keyframes mascot-idle-spin { 0% { rotate:0deg; } 75% { rotate:300deg; } 100% { rotate:360deg; } }
@keyframes mascot-idle-handstand { 0%,12% { rotate:0deg; translate:0 0; } 42%,65% { rotate:180deg; translate:0 -5px; } 100% { rotate:360deg; translate:0 0; } }
@keyframes mascot-idle-juggle { 0%,100% { translate:0 0; rotate:0deg; } 25% { translate:-2px -2px; rotate:-8deg; } 50% { translate:0 0; rotate:0deg; } 75% { translate:2px -2px; rotate:8deg; } }
@keyframes mascot-idle-cheer { 0%,100% { translate:0 0; rotate:0deg; } 28% { translate:0 -13px; rotate:-10deg; } 55% { translate:0 0; rotate:8deg; } 78% { translate:0 -6px; rotate:-5deg; } }
@keyframes mascot-juggle-left { 0% { transform:translate(0,0); } 100% { transform:translate(27px,-21px); } }
@keyframes mascot-juggle-right { 0% { transform:translate(0,0); } 100% { transform:translate(-27px,-21px); } }
.mascot-caption { position:absolute; bottom:0; left:8px; right:8px; background:white; border:1px solid #c9e0dd; color:#173a58; border-radius:20px; font-size:11px; font-weight:850; padding:3px 5px; box-shadow:0 3px 10px #173a5810; white-space:nowrap; }


.chat-widget:has(.mascot-launcher) .chat-panel { bottom:132px; max-height:min(690px,calc(100dvh - 155px)); border-radius:24px; border-color:#b9d9d2; }
.chat-widget:has(.mascot-launcher) .chat-panel-header { background:#eaf6f1; }
@media(min-width:1600px) { .sockworld-copy { padding-left:75px; } }
@media(max-width:1000px) and (min-width:701px) { .sockworld-copy { width:50%; padding:42px 24px; } .sockworld-hero { min-height:600px; } .sockworld-panel { padding:22px; } .sockworld-panel h2 { font-size:24px; } }
@media(max-width:700px) {
 .sockworld-hero { min-height:0; padding-bottom:100vw; background:#e5f4fc; }
 .sockworld-landscape { top:auto; left:0; height:auto; aspect-ratio:2/3; }
 .sockworld-landscape img { height:auto; object-fit:contain; }
 .sockworld-hero::before { background:linear-gradient(#f1fbff 0%,#f1fbff 29%,#f1fbff00 49%); }
 .sockworld-copy { width:100%; max-width:none; text-align:center; padding:34px 24px 20px; }
 .sockworld-copy h1 { font-size:clamp(34px,8.7vw,48px); margin-bottom:16px; }
 .sockworld-copy>p:not(.sockworld-kicker) { margin:0 auto 18px; font-size:15px; max-width:330px; }
 .sockworld-kicker { font-size:10px; margin-bottom:12px; }
 .sockworld-offer { margin:16px auto; font-size:14px; }
 .sockworld-copy small { margin:16px auto 0; font-size:10px; }
 .sockworld-how { margin:19px auto 0; }
 .sockworld-location { bottom:12px; left:50%; right:auto; transform:translateX(-50%); white-space:nowrap; font-size:10px; }
 .sockworld-panels { grid-template-columns:1fr; gap:14px; padding:24px 18px 38px; }
 .sockworld-panel { padding:24px; } .sockworld-panel h2 { font-size:28px; } .sockworld-panel p { max-width:90%; }
 .sockworld-journey { padding:48px 22px; } .sockworld-journey h2 { font-size:32px; margin-bottom:32px; }
 .sockworld-journey ol { grid-template-columns:1fr; gap:24px; text-align:left; }
 .sockworld-journey ol::before { top:20px; bottom:40px; left:29px; right:auto; border-top:0; border-left:3px dashed #779f8a; }
 .sockworld-journey li,.sockworld-journey li:nth-child(even) { min-height:100px; padding:0 0 0 83px; }
 .sockworld-journey li>span { position:absolute; left:0; top:0; }
 .sockworld-journey h3 { margin-bottom:9px; } .sockworld-journey li p { max-width:none; margin:0; }
 .mascot-launcher.chat-launcher { width:72px; height:82px; } .purly-sprite { width:72px; height:72px; }
 .mascot-caption { left:0; right:0; font-size:10px; }
 .chat-widget:has(.mascot-launcher) .chat-panel { bottom:106px; max-height:calc(100dvh - 130px); }
}
@media(prefers-reduced-motion:reduce) { .sockworld-panel,.mascot-launcher.chat-launcher { transition:none; } .sockworld-panel:hover,.mascot-launcher.chat-launcher:hover { transform:none; } .mascot-launcher.chat-launcher[data-mascot-action] .purly-sprite { animation:none!important; translate:none!important; rotate:none!important; will-change:auto; } .mascot-launcher.chat-launcher[data-mascot-action]::before,.mascot-launcher.chat-launcher[data-mascot-action]::after { display:none; animation:none!important; } }
