/* x-j.css: shopper home, construction J "The living world". Loads after styles.css and pages.css. 3 Nov 2026.
   The arrival intro's world (ink floor, magenta glow, drifting smoke, real gummies sinking) runs behind every section.
   Motion is transform + opacity only, CSS keyframes only; prefers-reduced-motion holds frame zero (the resting layout).
   3 Nov fix pass: gummies cut to one or two pieces beside their own pack, hero packs in one fanned row on a counter in front of the lilac skyline, rooms in brand colour. */

html, body { overflow-x: clip; background: var(--ink); }
.xj { position: relative; background: var(--ink); color: var(--paper); isolation: isolate; }

/* ---------- the living world: one ambient layer per section ---------- */
.xj-amb { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.xj-smoke { position: absolute; left: var(--l); top: var(--t); width: var(--w, 420px); height: auto; opacity: var(--o, .16); animation: xj-drift var(--d, 50s) ease-in-out infinite alternate; }
/* a real piece that spilled out of its own pack: sits still, sharp, at the pack's foot, never over words */
.xj-piece { position: absolute; right: var(--x, -6px); bottom: var(--y, 0); width: var(--s, 24px); height: auto; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); z-index: 2; }
.xj-piece--l { right: auto; left: var(--x, -6px); }
@keyframes xj-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--dx, 60px), var(--dy, -70px)) scale(1.14); } }
@keyframes xj-rise { 0% { transform: translateY(10px) scale(.9); opacity: 0; } 20% { opacity: var(--o, .3); } 100% { transform: translateY(-150px) scale(1.5); opacity: 0; } }
@keyframes xj-float { from { transform: translateY(0) rotate(var(--rot, 0deg)); } to { transform: translateY(-8px) rotate(var(--rot, 0deg)); } }
@media (prefers-reduced-motion: reduce) { .xj-smoke, .xj-steam, .xj-pack, .xj-p { animation: none !important; } .xj-rise .xj-steam { opacity: calc(var(--o, .3) * .8); transform: translateY(-40px) scale(1.2); } }

/* ---------- type: the brand's Fraunces, same settings as .h-hero ---------- */
.xj-h1, .xj-h2, .xj-names { font-family: var(--serif); font-optical-sizing: auto; font-variation-settings: "SOFT" 30; letter-spacing: var(--track); }
.xj-h1 { font-weight: 600; font-size: 40px; line-height: 1; margin: 0; color: #fff; text-wrap: balance; }
.xj-h2 { font-weight: 600; font-size: 38px; line-height: 1.02; margin: 0; color: #fff; max-width: 14em; text-wrap: balance; }

/* ---------- hero ---------- */
.xj-hero { position: relative; overflow: hidden; }
.xj-hero::before { /* the magenta floor glow from the intro */
  content: ""; position: absolute; z-index: 0; left: 50%; top: 34%; width: 1100px; height: 900px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(168, 25, 201, .32), rgba(168, 25, 201, .08) 55%, transparent 75%); pointer-events: none;
}
.xj-hero-inner { position: relative; z-index: 1; padding-top: 10px; padding-bottom: 40px; }
/* the counter: six packs stood in one fanned row at their real relative sizes, the lilac Detroit skyline faint behind, smoke rising off them */
.xj-counter { position: relative; padding: 72px 16px 0; --ph: 86px; }
/* the Detroit skyline: the whole mark at the full viewport width, faint, standing on a thin horizon the packs sit on */
.xj-skyline { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100vw; aspect-ratio: 1941 / 488; pointer-events: none; z-index: 0; opacity: .5;
  background: linear-gradient(to top, rgba(160, 110, 230, .35), rgba(190, 150, 240, .7) 50%, rgba(210, 180, 255, .85));
  -webkit-mask: url(../img/shoppers/skyline.webp) center bottom / 100% 100% no-repeat; mask: url(../img/shoppers/skyline.webp) center bottom / 100% 100% no-repeat; }
.xj-floor { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 100vw; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(205, 175, 255, .45) 20%, rgba(205, 175, 255, .45) 80%, transparent); }
.xj-floor::after { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 26px; background: linear-gradient(to bottom, rgba(168, 25, 201, .22), transparent); }
.xj-packs { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; margin: 0; }
/* six packs in one fanned row, small ones at the ends, no overlap of printed faces (outer packs lean outward) */
.xj-pack { margin: 0 1px; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); --rot: calc((var(--i, 0) - 2.5) * 2deg); transform: rotate(var(--rot)); transform-origin: 50% 100%; animation: xj-float 5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.9s); }
.xj-pack img { width: auto; height: calc(var(--ph) * var(--k, 1)); display: block; }
.xj-rise { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 2; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 25%, #000 70%, transparent); mask-image: linear-gradient(to top, transparent 0, #000 25%, #000 70%, transparent); }
.xj-steam { position: absolute; left: var(--l); bottom: calc(var(--ph) * .35); width: var(--w, 180px); height: auto; opacity: 0; transform-origin: 50% 100%; animation: xj-rise var(--d, 15s) linear infinite; animation-delay: var(--dl, 0s); }
.xj-finder { position: relative; z-index: 1; margin-top: 24px; max-width: 680px; }
.xj-sub { margin: 12px 0 0; color: var(--muted-ink); font-size: 16px; line-height: 1.4; max-width: 30em; text-wrap: pretty; }
.xj-search { display: flex; gap: 8px; margin-top: 16px; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.xj-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 500; color: var(--ink); padding: 10px 6px 10px 18px; outline: none; }
.xj-search input::placeholder { color: #8b867d; }
.xj-search .btn { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
.xj-search:focus-within { box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 2px #fff; }
.xj-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xj-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(243, 239, 231, .3); background: transparent; color: var(--paper); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.xj-chip:hover, .xj-chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.xj-trust { margin: 14px 0 0; color: var(--muted-ink); font-size: 14px; line-height: 1.4; text-wrap: pretty; }
.xj-trust a { color: var(--paper); white-space: nowrap; }
.xj-count { margin: 0; font-weight: 600; color: var(--paper); font-size: 16px; }
.xj-count:not(:empty) { margin-top: 22px; }
.xj-results.store-list { margin-top: 0; gap: 10px; }
.xj-results.store-list:not(:empty) { margin-top: 12px; }
.xj-results .store { padding: 12px 16px; border: 0; gap: 0; }
.xj-results .store-name { color: var(--ink); font-size: 17px; }
.xj-results .store-city { font-weight: 500; font-size: 15px; color: var(--ink-2); }
.xj-results .store-addr { font-size: 15px; }
.xj-results .store-empty { color: var(--muted-ink); margin-top: 8px; }
.xj-note { margin: 6px 0 0; color: var(--muted-ink); font-size: 14px; line-height: 1.4; text-wrap: pretty; }
.xj-note a { color: var(--paper); white-space: nowrap; }

/* the 21+ band, on ink here so the world does not break */
.xj .brand-notice { background: rgba(243, 239, 231, .06); border-top: 1px solid rgba(243, 239, 231, .12); border-bottom: 1px solid rgba(243, 239, 231, .12); position: relative; z-index: 1; }
.xj .brand-notice .adults-line { color: var(--muted-ink); }
.xj-sec-head { padding-top: 48px; padding-bottom: 56px; position: relative; z-index: 1; }

/* ---------- brand stacks ---------- */
.xj-stack { position: relative; overflow: hidden; }
.xj-four::before { /* a soft light behind the packs only, so every logo sits on the room's base colour */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 760px; height: 420px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 30%, transparent), color-mix(in srgb, var(--glow) 8%, transparent) 55%, transparent 74%);
}
/* six rooms, six brand colours (the site's .room--* values; Bossy and King Cole lifted so they read on ink) */
.xj-room { background: var(--room); color: var(--room-fg, #fff); --glow: #fff; --room-fg: #fff; --room-muted: #F3EFE7; --room-rule: rgba(255, 255, 255, .4); }
.xj-room--mcc { --room: var(--room-mcc); }
.xj-room--chewii { --room: var(--room-chewii); }
.xj-room--bossy { --room: #4A2E0E; --glow: #C78A2A; }
.xj-room--flight { --room: var(--room-flight); --room-fg: var(--ink); --room-muted: rgba(18, 18, 18, .72); --room-rule: rgba(18, 18, 18, .4); --glow: #fff; }
.xj-room--ripz { --room: var(--room-ripz); }
.xj-room--king-cole { --room: #4D2A8C; --glow: #9B6BE0; }
.xj-room .xj-names, .xj-room .xj-more { color: var(--room-fg); }
.xj-room .xj-fact { color: var(--room-muted); }
.xj-room .xj-more { border-bottom-color: var(--room-rule); }
.xj-room .xj-more:hover { border-bottom-color: var(--room-fg); }
.xj-room--flight .xj-smoke { mix-blend-mode: soft-light; }
.xj-stack-inner { position: relative; z-index: 1; display: grid; gap: 48px; padding-top: 40px; padding-bottom: 44px; }
/* strips: 40 px from the screen edge (24 gutter + 16), and rooms alternate text-first / packs-first at every width */
.xj-four { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 0; padding: 10px 24px 0; }
.xj-stack--flip .xj-four { order: 2; }
.xj-p { position: relative; margin: 0; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; --rot: calc((var(--i, 0) - 1.5) * 1.6deg);
  transform: rotate(var(--rot)); transform-origin: 50% 100%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .55)); animation: xj-float 6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.3s); }
.xj-p > img:first-child { width: auto; height: auto; max-width: 100%; max-height: 176px; object-fit: contain; object-position: bottom; display: block; margin: 0 auto; }
.xj-brand { margin: 0; line-height: 0; }
/* one logo height in every room, left-aligned on one baseline */
.xj-mark, .xj-mark--block, .xj-mark--tall, .xj-mark--flight { height: 64px; width: auto; max-width: 230px; object-fit: contain; object-position: left center; }
/* King Cole's mark is tall: sized by width so it reads as wide as the other marks */
.xj-mark--kc { height: auto; width: 150px; max-width: none; }
.xj-room--bossy .xj-mark { filter: brightness(1.4) saturate(.9); }
/* rooms vary for real: three shaped pouches (Ripz), one big hero pack (Flight, King Cole), four across elsewhere */
.xj-four--three { gap: 18px; }
.xj-four--three .xj-p > img:first-child { max-height: 215px; }
.xj-four--one .xj-p { flex: 0 0 auto; --rot: -2deg; }
.xj-four--one .xj-p > img:first-child { max-height: 290px; }
.xj-stack--one .xj-four::before { width: 520px; height: 520px; }
/* Bossy: four boxes at one height and one orientation, the Root Beer x Ice Cream cut-out at the same scale as the cart boxes */
.xj-stack--bossy .xj-p { flex: 0 1 auto; --rot: 0deg; }
.xj-stack--bossy .xj-p > img:first-child { height: 96px; max-height: none; width: auto; }
.nb { white-space: nowrap; }
.xj-fact { margin: 16px 0 0; color: var(--muted-ink); font-size: 17px; line-height: 1.5; max-width: 32em; text-wrap: pretty; }
.xj-names { list-style: none; margin: 18px 0 0; padding: 0; font-weight: 600; font-size: 31px; line-height: 1.06; color: #fff; }
.xj-names li + li { margin-top: 4px; }
.xj-more { display: inline-block; margin-top: 14px; color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 2px; }
.xj-more:hover { border-bottom-color: #fff; }

/* ---------- close ---------- */
.xj-close { position: relative; overflow: hidden; }
.xj-close .wrap { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 32px; }
.xj-close .xj-search { margin-top: 26px; max-width: 560px; }
.xj-close-line { margin: 18px 0 0; }
.xj-trade { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid rgba(243, 239, 231, .14); font-size: 15px; }
.xj-trade a { color: var(--muted-ink); }

/* ---------- wider ---------- */
@media (min-width: 600px) {
  .xj-h1 { font-size: 64px; }
  .xj-counter { --ph: 190px; padding-top: 160px; }
  .xj-pack { margin: 0 2px; --rot: calc((var(--i, 0) - 2.5) * 3deg); }
  .xj-four--three .xj-p > img:first-child { max-height: 290px; }
  .xj-four--one .xj-p > img:first-child { max-height: 380px; }
  .xj-stack--bossy .xj-p > img:first-child { height: 180px; }
  .xj-mark--kc { width: 170px; }
  .xj-results.store-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xj-p > img:first-child { max-height: 250px; }
  .xj-four { gap: 16px; }
  .xj-h2 { font-size: 52px; }
}
@media (min-width: 1100px) {
  .xj-hero-inner { padding-top: 40px; padding-bottom: 96px; min-height: calc(100vh - var(--header-h, 72px)); display: grid; grid-template-rows: auto auto; justify-items: center; }
  .xj-counter { --ph: 300px; padding-top: 170px; width: 100%; max-width: 1240px; }
  .xj-skyline { opacity: .34; }
  .xj-pack { margin: 0 3px; }
  .xj-steam { bottom: calc(var(--ph) * .4); }
  .xj-finder { text-align: left; margin-top: 56px; max-width: 960px; width: 100%; justify-self: start; }
  .xj-h1 { font-size: 66px; max-width: 13em; }
  .xj-sub { font-size: 20px; max-width: 40em; }
  .xj-four { padding-left: 24px; padding-right: 24px; }
  .xj-results { text-align: left; }
  .xj-smoke { opacity: calc(var(--o, .16) * .75); }
  .xj-stack-inner { grid-template-columns: 6fr 6fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
  .xj-four::before { width: 900px; height: 600px; }
  .xj-p > img:first-child { max-height: 330px; }
  .xj-four { gap: 18px; }
  .xj-piece { width: calc(var(--s, 24px) * 1.5); }
  .xj-names { font-size: 44px; margin-top: 26px; }
  .xj-names li + li { margin-top: 6px; }
  .xj-fact { font-size: 19px; }
  .xj-mark, .xj-mark--block, .xj-mark--tall, .xj-mark--flight { height: 72px; max-width: 280px; }
  .xj-mark--kc { height: auto; width: 180px; max-width: none; }
  .xj-four--three .xj-p > img:first-child { max-height: 360px; }
  .xj-four--one .xj-p > img:first-child { max-height: 460px; }
  .xj-stack--bossy .xj-p > img:first-child { height: 200px; }
  .xj-stack--one .xj-four::before { width: 620px; height: 620px; }
  .xj-sec-head { padding-top: 80px; padding-bottom: 64px; }
  .xj-close .wrap { padding-top: 96px; padding-bottom: 56px; text-align: center; }
  .xj-close .xj-h2 { margin: 0 auto; }
  .xj-close .xj-search { margin-left: auto; margin-right: auto; }
}

/* last pass, 3 Nov: contrast, clearance and rhythm */
.xj-search input::placeholder { color: #5f5a52; }
.xj-trade a { color: rgba(243, 239, 231, .85); }
.xj-room--flight .xj-fact { color: rgba(18, 18, 18, .85); }
.xj-names li.long { font-size: 24px; white-space: nowrap; }
.xj-packs { padding-bottom: 44px; }
.xj-sec-head { padding-top: 40px; padding-bottom: 40px; }
.xj-find { display: inline-block; margin-left: 18px; font-size: 15px; color: var(--room-fg); opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .xj-names li.long { font-size: 34px; } .xj-sec-head { padding-top: 56px; padding-bottom: 56px; } }

/* narrow phones: the headline wraps freely and steps down so nothing clips at 360 px */
.nb-wide { white-space: normal; }
@media (min-width: 900px) { .nb-wide { white-space: nowrap; } }
@media (max-width: 400px) { .xj-h1 { font-size: 34px; } }
@media (max-width: 370px) { .xj-h1 { font-size: 31px; } }