:host{display:block}

  /* Brand tokens lifted from the live theme's rebuild.css so this reads as the
     shop rather than a demo. Changes here have to go back into the theme. */
  :host{
    --cream:#FBF6F0; --band:#FDF9F5; --card:#FFFFFF; --line:#EDE4DA;
    --ink:#241A1F; --ink-2:#5C5057; --ink-3:#736068;
    --hot:#B4145A; --hot-2:#8E0F47;
    --dark:#2A1119; --sand:#F1E3D2;
    --disp:'Fraunces',Georgia,'Times New Roman',serif;
    --body:'Poppins','Open Sans',system-ui,sans-serif;
    --sh-2:0 2px 4px rgba(58,38,28,.06), 0 14px 30px -12px rgba(58,38,28,.22);

    /* Set from the artwork at runtime: the colour of whatever is centred, and
       the blend between the two packets either side of the current position. */
    --tint:180,20,90;

    --gap:252px;        /* horizontal step between neighbouring packets */
    --slide-h:440px;    /* height of the centre packet */
    --tiltX:0deg; --tiltY:0deg;
  }
  /* The step has to stay comfortably WIDER than a packet, or the centre one
     covers its neighbours and the shelf stops reading as a shelf. A packet is
     0.62 * --slide-h wide, so --gap is kept above that at every size. */
  @media (max-width:1100px){ :host{ --gap:212px; --slide-h:380px } }
  @media (max-width:820px) { :host{ --gap:176px; --slide-h:320px } }
  @media (max-width:560px) { :host{ --gap:150px; --slide-h:268px } }
  @media (max-width:380px) { :host{ --gap:132px; --slide-h:240px } }

  *{box-sizing:border-box}
  :host{margin:0}
  :host{
    background:var(--cream);color:var(--ink);font-family:var(--body);
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  }

  /* ---------- stage ---------- */
  .hero{
    position:relative;overflow:hidden;padding:38px 0 0;
    border-bottom:1px solid var(--line);
    background:var(--cream);
    isolation:isolate;
  }
  /* The colour wash. Two layers: a wide soft bloom and a tighter pool behind
     the centre packet, both driven by --tint so they travel with the artwork. */
  .hero::before,
  .hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
  .hero::before{
    background:
      radial-gradient(70% 52% at 50% 46%, rgba(var(--tint),.30) 0%,
                      rgba(var(--tint),.12) 42%, rgba(var(--tint),0) 72%);
    transition:background .5s cubic-bezier(.4,0,.2,1);
  }
  .hero::after{
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.92) 0%,
                      rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 68%);
  }
  .wrap{max-width:1280px;margin:0 auto;padding:0 20px;position:relative;z-index:2}

  .hero__head{text-align:center;max-width:720px;margin:0 auto}
  .eyebrow{
    display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.17em;
    text-transform:uppercase;color:var(--hot);margin:0 0 10px;
  }
  h1{
    font-family:var(--disp);font-weight:600;font-optical-sizing:auto;
    font-size:clamp(29px,4.5vw,50px);line-height:1.05;letter-spacing:-.02em;
    margin:0 0 10px;text-wrap:balance;
  }
  .hero__lead{margin:0;color:var(--ink-2);font-size:15.5px;max-width:52ch;
    margin-inline:auto;text-wrap:pretty}
  @media (max-width:560px){ .hero__lead{font-size:14.5px} }

  /* ---------- filter ---------- */
  .filters{display:flex;justify-content:center;gap:8px;margin:18px 0 0;flex-wrap:wrap}
  .chip{
    font:600 13px/1 var(--body);letter-spacing:.01em;
    padding:9px 16px;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.72);color:var(--ink-2);
    border:1px solid var(--line);backdrop-filter:blur(6px);
    transition:background .16s,color .16s,border-color .16s,transform .16s;
  }
  .chip:hover{transform:translateY(-1px);border-color:#DDD0C4}
  .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .chip:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
  .chip b{opacity:.5;font-weight:600;margin-left:5px}

  /* ---------- carousel ---------- */
  .cf{
    position:relative;z-index:2;margin-top:12px;
    height:calc(var(--slide-h) + 112px);
    perspective:1500px;perspective-origin:50% 42%;
    touch-action:pan-y;user-select:none;-webkit-user-select:none;
  }
  .cf:focus-visible{outline:3px solid var(--hot);outline-offset:8px;border-radius:16px}

  /* ---------- the set the packets stand in ----------
     A back wall, a floor receding under them, and a vignette to stop the
     corners competing with the centre. All three take their colour from
     --tint, so the room changes with whatever is centred. */
  /* .cf carries the perspective, so everything inside it is sorted by real Z,
     not by z-index. The packets sit between Z 0 and -660, so the set has to be
     pushed further back than that or it paints over them. translateZ shrinks
     it under perspective, and scale(1.6) is the exact counter for -900px at a
     1500px perspective: (1500+900)/1500. */
  .cf__set{
    position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    transform:translateZ(-900px) scale(1.6);
    /* Without this the set stops dead at the top and bottom of the carousel
       box and reads as a printed band rather than a room the packets are in. */
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0%, #000 15%, #000 84%, transparent 100%);
    mask-image:linear-gradient(to bottom,
      transparent 0%, #000 15%, #000 84%, transparent 100%);
  }
  .set__wall{
    position:absolute;left:0;right:0;top:0;height:64%;
    background:linear-gradient(to bottom,
      rgba(var(--tint),.04) 0%, rgba(var(--tint),.17) 70%, rgba(var(--tint),.24) 100%);
    transition:background .5s cubic-bezier(.4,0,.2,1);
  }
  .set__floor{
    position:absolute;left:-14%;right:-14%;top:62%;bottom:-6%;
    transform:perspective(620px) rotateX(46deg);transform-origin:50% 0;
    background:
      linear-gradient(to bottom,
        rgba(var(--tint),.40) 0%, rgba(var(--tint),.16) 34%, rgba(255,255,255,.46) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    transition:background .5s cubic-bezier(.4,0,.2,1);
  }
  /* The horizon: a thin bright seam where wall meets floor. */
  .set__seam{
    position:absolute;left:0;right:0;top:62%;height:1px;
    background:linear-gradient(to right,
      rgba(255,255,255,0), rgba(255,255,255,.85) 22%, rgba(255,255,255,.85) 78%, rgba(255,255,255,0));
  }
  .set__vign{
    position:absolute;inset:0;
    background:radial-gradient(74% 62% at 50% 44%,
      rgba(42,17,25,0) 42%, rgba(42,17,25,.13) 100%);
  }

  /* Everything that tilts with the pointer lives in here. */
  .cf__world{
    position:absolute;inset:0;transform-style:preserve-3d;
    transform:rotateX(var(--tiltX)) rotateY(var(--tiltY));
    transition:transform .28s cubic-bezier(.33,1,.68,1);
  }
  .cf__stage{position:absolute;inset:0;transform-style:preserve-3d}

  /* Contact shadows sit on their own FLAT plane. If they lived inside the
     rotated packets they would tip up with them and stop reading as shadows
     on a surface. */
  /* Sits on the floor line of a full-size packet; each shadow is then lifted
     to its own packet's base by JS, because a scaled packet's feet rise. */
  .cf__ground{position:absolute;left:0;right:0;bottom:98px;height:0;z-index:0}
  .shadow{
    position:absolute;left:50%;bottom:0;border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%,
      rgba(var(--tint),.46) 0%, rgba(42,17,25,.22) 45%, rgba(42,17,25,0) 72%);
    will-change:transform,opacity;pointer-events:none;
    filter:blur(7px);
  }

  .cf__item{
    position:absolute;left:50%;top:14px;
    width:calc(var(--slide-h) * .62);height:var(--slide-h);
    margin-left:calc(var(--slide-h) * -.31);
    border:0;padding:0;background:none;cursor:pointer;
    transform-style:preserve-3d;will-change:transform,opacity;
    -webkit-tap-highlight-color:transparent;
  }
  .cf__item .lift{
    display:block;width:100%;height:100%;position:relative;
    transition:transform .22s cubic-bezier(.33,1,.68,1), filter .22s ease;
    transform-style:preserve-3d;
  }
  .cf__item img.pack{
    width:100%;height:100%;object-fit:contain;display:block;
    filter:drop-shadow(0 14px 18px rgba(58,38,28,.22));
    pointer-events:none;
  }
  /* Hover is an invitation to click, not a trigger. Nothing rotates on hover:
     a cursor crossing the hero would otherwise fire it by accident, and the
     packet would move out from under the click. */
  .cf__item:not(.is-active):hover .lift{transform:translateY(-14px) scale(1.045)}
  .cf__item:not(.is-active):hover img.pack{filter:drop-shadow(0 22px 26px rgba(58,38,28,.3)) brightness(1.05)}
  .cf__item.is-active{cursor:default}
  .cf__item.is-active img.pack{filter:drop-shadow(0 26px 34px rgba(58,38,28,.34))}
  .cf__item:focus-visible{outline:3px solid var(--hot);outline-offset:6px;border-radius:12px}

  /* A soft sheen across the centre packet; it slides with the pointer tilt. */
  .gloss{
    position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .3s ease;
    background:linear-gradient(104deg,
      rgba(255,255,255,0) 36%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 64%);
    mix-blend-mode:soft-light;
  }
  .cf__item.is-active .gloss{opacity:1}

  .cf__nav{
    position:absolute;top:calc(50% - 30px);z-index:300;
    width:54px;height:54px;border-radius:50%;
    display:grid;place-items:center;
    background:rgba(255,255,255,.86);border:1px solid var(--line);
    box-shadow:var(--sh-2);cursor:pointer;color:var(--ink);
    backdrop-filter:blur(8px);
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .cf__nav:hover{background:var(--hot);color:#fff;border-color:var(--hot);transform:scale(1.08)}
  .cf__nav:active{transform:scale(.95)}
  .cf__nav:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
  .cf__nav--prev{left:max(10px,calc(50% - 610px))}
  .cf__nav--next{right:max(10px,calc(50% - 610px))}
  .cf__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round}
  @media (max-width:560px){
    .cf__nav{width:42px;height:42px} .cf__nav svg{width:16px;height:16px}
  }

  /* ---------- panel ---------- */
  .pick{position:relative;z-index:5;text-align:center;padding:0 0 38px}
  .pick__name{
    font-family:var(--disp);font-weight:600;font-size:clamp(24px,3.1vw,34px);
    line-height:1.08;margin:0 0 5px;letter-spacing:-.015em;min-height:1.08em;
  }
  .pick__sub{margin:0 0 16px;color:var(--ink-3);font-size:13.5px}
  .pick__sub b{color:var(--ink);font-weight:600}

  .pick__buy{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;text-decoration:none;
    font-weight:600;font-size:15px;padding:13px 13px 13px 24px;border-radius:999px;
    transition:background .18s ease, transform .15s ease, box-shadow .4s ease,
               border-color .18s ease, color .18s ease;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .btn .price{
    padding:4px 12px;border-radius:999px;font-size:14px;
    display:inline-flex;align-items:baseline;gap:6px;
  }
  /* The pack has an RRP printed on it, so where the shop sells under that the
     saving is the point and both numbers have to show. */
  .btn .price s{opacity:.55;font-weight:500;font-size:12.5px;text-decoration-thickness:1px}
  .btn .price b{font-weight:700}
  /* The single packet is the everyday purchase, so it carries the weight. */
  .btn--buy{
    background:var(--ink);color:#fff;
    box-shadow:0 10px 24px -8px rgba(var(--tint),.75), var(--sh-2);
  }
  .btn--buy:hover{background:var(--hot)}
  .btn--buy .price{background:rgba(255,255,255,.18)}
  /* The box is the bulk option: present, but not shouting over the single. */
  .btn--box{
    background:rgba(255,255,255,.8);color:var(--ink);border:1px solid var(--line);
    backdrop-filter:blur(6px);
  }
  .btn--box:hover{border-color:var(--ink)}
  .btn--box .price{background:rgba(36,26,31,.08)}

  /* Counter + rail, in place of 42 dots that wrapped onto two rows and said
     nothing about where you were. */
  .meter{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin:20px auto 0;max-width:340px;
  }
  .meter__count{
    font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;
    color:var(--ink-2);letter-spacing:.06em;white-space:nowrap;
  }
  .meter__count b{color:var(--ink);font-size:14px}
  .rail{
    position:relative;flex:1;height:3px;border-radius:999px;
    background:#E6DACE;overflow:hidden;
  }
  .rail__fill{
    position:absolute;top:0;bottom:0;left:0;border-radius:999px;
    background:rgb(var(--tint));
    transition:transform .32s cubic-bezier(.33,1,.68,1), background .5s ease;
    transform-origin:left center;
  }
  .hint{text-align:center;color:var(--ink-3);font-size:12px;margin:12px 0 0}
  .hint kbd{
    font:inherit;background:var(--card);border:1px solid var(--line);
    border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink-2);
  }
  @media (max-width:560px){ .hint{font-size:11.5px} }

  @media (prefers-reduced-motion:reduce){
    .cf__world,.hero::before,.rail__fill,.cf__item .lift,.pick__cta,.cf__nav{transition:none}
  }

  .note{max-width:1280px;margin:26px auto 60px;padding:0 20px;color:var(--ink-3);font-size:13px}
  .note b{color:var(--ink-2)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* Sweet-shop art direction. All scenery stays behind the perspective stage. */
  :host{--slide-h:350px;--gap:260px;--cream:#fff8ef}
  .hero{padding:24px 0 0;background:#fff8ef}
  .hero::before{background:radial-gradient(ellipse at 50% 57%,rgba(var(--tint),.18),transparent 66%)}
  .hero::after{inset:0;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23876648' opacity='.2' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
  .brandline{display:flex;align-items:center;justify-content:space-between;max-width:1380px;margin:0 auto 24px;padding:0 40px;position:relative;z-index:3}
  .wordmark{font:700 25px/1 var(--disp);letter-spacing:-1px;color:var(--hot)}
  .wordmark span{font-style:italic}
  .brandline small{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
  .hero__head{max-width:900px}
  .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:10px}
  h1{font-size:clamp(42px,5.6vw,76px);letter-spacing:-.055em;line-height:1;margin-bottom:13px}
  h1 em{color:var(--hot);font-weight:600}
  .hero__lead{font-size:13px;max-width:none}
  .filters{gap:3px;margin:18px auto 0;padding:4px;width:max-content;border:1px solid #e9dcca;border-radius:999px;background:#fffaf3}
  .chip{border:0;background:transparent;padding:10px 18px;font-size:11px}
  .chip[aria-pressed="true"]{background:var(--hot)}
  .cf{margin-top:16px;height:calc(var(--slide-h) + 60px);cursor:grab}
  .cf.is-dragging{cursor:grabbing}
  .cf__set{inset:-20px 0 -30px;mask-image:linear-gradient(transparent,#000 12%,#000 86%,transparent)}
  .set__wall{left:50%;right:auto;top:8%;width:620px;height:88%;transform:translateX(-50%);border-radius:310px 310px 0 0;background:linear-gradient(160deg,rgba(var(--tint),.23),rgba(var(--tint),.07));border:1px solid rgba(var(--tint),.13);box-shadow:0 0 0 22px #fff8ef,0 0 0 23px rgba(var(--tint),.13),0 0 0 48px #fff8ef,0 0 0 49px rgba(var(--tint),.08)}
  .set__wall::before{content:'PICK YOUR HAPPY';position:absolute;top:20%;left:50%;transform:translateX(-50%);font:600 66px/.9 var(--disp);letter-spacing:-.04em;color:rgba(var(--tint),.2);white-space:nowrap}
  .set__floor{top:81%;bottom:0;transform:none;border-radius:50% 50% 0 0;background:linear-gradient(rgba(var(--tint),.14),#fff8ef);box-shadow:0 -1px 0 rgba(var(--tint),.1)}
  .set__seam,.set__vign{display:none}
  .cf__item{top:18px}
  .cf__ground{bottom:42px}
  .cf__item.is-active .lift{animation:float 5s ease-in-out infinite}
  .cf.is-moving .cf__item .lift,.cf.is-dragging .cf__item .lift{animation:none}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(1deg)}}
  .cf__item img.pack{filter:drop-shadow(0 12px 12px #43232425)}
  .cf__item.is-active img.pack{filter:drop-shadow(0 20px 18px #43232435)}
  .gloss{display:none}
  .cf__nav{width:46px;height:46px;top:45%;background:#fffaf2;box-shadow:0 5px 15px #4323240c;border-color:#e6d8c8;transform:translateZ(80px)}
  .cf__nav:hover{transform:translateZ(80px) scale(1.08)}
  .cf__nav--prev{left:5%}.cf__nav--next{right:5%}
  .stage-label{position:absolute;z-index:3;top:2%;left:calc(50% - 440px);transform:rotate(-10deg);font:italic 23px/1.1 var(--disp);color:var(--hot);pointer-events:none}
  .stage-label span{display:block;font:10px/2 var(--body);letter-spacing:.1em;text-transform:uppercase}
  .stage-price{position:absolute;right:calc(50% - 430px);top:4%;z-index:3;width:86px;height:86px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--hot);color:#fff8ef;transform:rotate(9deg);outline:1px dashed #fff8ef88;outline-offset:-6px;pointer-events:none}
  .stage-price small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.stage-price b{font:600 30px/1.1 var(--disp)}
  .pick{max-width:940px;padding:0 24px 25px}
  .pick__card{display:flex;text-align:left;align-items:center;justify-content:space-between;gap:24px;padding:20px 26px;background:#fffcf7e8;border:1px solid #e9dece;border-radius:20px;box-shadow:0 12px 30px -20px #52332930}
  .pick__name{font-size:27px;margin:0 0 5px;min-height:1.1em}
  .pick__sub{font-size:11px;margin:0}
  .pick__buy{flex-wrap:nowrap;flex-shrink:0;gap:8px}
  .btn{font-size:12px;padding:12px 12px 12px 18px;gap:10px}
  .btn--buy{background:var(--hot);box-shadow:0 6px 14px #b4145a18}.btn--buy:hover{background:var(--hot-2)}
  .btn--box{background:transparent;border-color:#e7daca}.btn .price{font-size:12px;padding:3px 9px}
  .meter{max-width:100%;margin-top:18px;gap:16px}.rail{flex:0 1 180px;height:3px}.rail__fill{width:100%;background:var(--hot);transform-origin:left center;transition:transform .32s cubic-bezier(.33,1,.68,1)}
  .meter__count,.meter__count b{font-size:11px}.hint{margin:0;font-size:10px}.hint kbd{background:transparent}
  .tour{font:500 10px var(--body);border:1px solid #e7daca;background:transparent;color:var(--ink-2);border-radius:99px;padding:6px 12px;cursor:pointer}
  .tour:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
  .bottomline{display:flex;justify-content:center;gap:36px;padding:14px 20px;border-top:1px solid #e9dece;font-size:10px;color:var(--ink-3);letter-spacing:.04em}.bottomline span::before{content:'✧';color:var(--hot);margin-right:10px}
  .note{font-size:11px;margin:20px auto 30px;text-align:center}
  @media(max-width:900px){:host{--gap:220px;--slide-h:310px}.stage-label{left:12%}.stage-price{right:12%}.pick__card{padding:18px}.pick__name{font-size:23px}.btn{padding:11px;font-size:11px}}
  @media(max-width:600px){
    :host{--gap:166px;--slide-h:265px}
    .hero{padding-top:19px}.brandline{padding:0 22px;margin-bottom:23px}.wordmark{font-size:22px}.brandline small{font-size:8px}
    h1{font-size:44px;max-width:340px;margin:0 auto 12px}.hero__lead{font-size:11px;max-width:280px}.eyebrow{font-size:9px}
    .filters{margin-top:15px}.chip{font-size:10px;padding:9px 14px}
    .cf{margin-top:20px;height:315px}.cf__set{inset:-35px -120px -10px}.set__wall{width:300px}.set__wall::before{font-size:40px;top:17%}
    .stage-label{display:none}.stage-price{width:62px;height:62px;right:20px;top:3%;}.stage-price b{font-size:23px}.stage-price small{font-size:7px}
    .cf__nav{width:36px;height:36px;top:61%}.cf__nav--prev{left:14px}.cf__nav--next{right:14px}
    .pick{padding:0 16px 18px}.pick__card{flex-direction:column;gap:14px;padding:16px;text-align:center;border-radius:17px}.pick__name{font-size:25px}.pick__buy{width:100%;justify-content:center}.btn{padding:11px 12px;font-size:11px}.btn .price{font-size:11px}
    .meter{gap:10px;flex-wrap:wrap;margin-top:14px}.rail{flex-basis:100px}.hint{width:100%;order:4;font-size:9px}.bottomline{gap:15px;font-size:8px;padding:12px 8px}.bottomline span::before{margin-right:5px}
  }
  @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.tour{display:none}}


  /* Revolving display: all movement comes from the orbit, never a hover wiggle. */
  .cf__item .lift,.cf__item.is-active .lift,.cf__item:not(.is-active):hover .lift{animation:none!important;transform:none!important}
  .cf__world{transform:none;transition:none}
  .cf__item,.cf__item.is-active{cursor:grab}.cf.is-dragging *{cursor:grabbing!important}
  .cf{height:calc(var(--slide-h) + 145px);margin-top:26px}
  .cf__item{top:64px}
  .orbit-track{position:absolute;left:50%;bottom:32px;width:min(1000px,88vw);height:180px;border:1px solid rgba(var(--tint),.26);border-radius:50%;transform:translateX(-50%) translateZ(-780px) scale(1.52);pointer-events:none;box-shadow:0 0 0 18px rgba(var(--tint),.025),0 0 0 19px rgba(var(--tint),.1)}
  .motion-status{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateZ(90px);font:500 10px var(--body);letter-spacing:.06em;color:var(--hot);white-space:nowrap;pointer-events:none;background:#fff8efe6;border:1px solid #eadcca;padding:6px 14px;border-radius:99px}
  .cf[data-direction='left'] .cf__nav--prev,.cf[data-direction='right'] .cf__nav--next{background:var(--hot);color:white}
  .stage-label{top:-5px}.stage-price{top:2%}.pick{margin-top:14px}
  .set__wall::before{content:'HAPPINESS, ON REPEAT';font-size:46px;top:17%}
  @media(max-width:600px){.cf{height:395px;margin-top:20px}.cf__item{top:58px}.orbit-track{height:100px;width:560px;bottom:40px}.stage-price{top:0}.motion-status{font-size:9px}.set__wall::before{font-size:26px}.hint{font-size:8px}}

.pick__buy #ctaBox{order:-1}.stage-price b{font-size:25px}@media(max-width:600px){.stage-price b{font-size:19px}}
.filters:empty{display:none}

  /* A photographic shop and counter replace the abstract set. */
  :host{--slide-h:310px;--gap:250px}
  .hero::before{background:none}.hero::after{display:none}
  .cf{height:570px;margin:26px auto 0;max-width:1600px;isolation:isolate}
  .cf__set{inset:0;background:linear-gradient(180deg,#fff8ef 0%,#fff8ef00 15%),none center 60%/cover no-repeat;mask-image:none;-webkit-mask-image:none;border-radius:28px 28px 0 0}
  .cf__set>*{display:none}
  .orbit-track,.stage-label{display:none}
  .cf__item{top:64px;width:calc(var(--slide-h)*.80);margin-left:calc(var(--slide-h)*-.40)}
  .cf__item img.pack,.cf__item.is-active img.pack{filter:drop-shadow(3px 8px 6px #39231326)}
  .shadow{background:radial-gradient(ellipse,#2b160c80 0%,#39211044 30%,transparent 70%);filter:blur(4px)}
  .cf__nav{top:49%;background:#fff8efe8;border-color:#fff8ef88}
  .stage-price{right:8%;top:7%;box-shadow:0 6px 18px #33110730;transform:translateZ(85px) rotate(8deg)}
  .motion-status{bottom:22px;background:#fff8efed;box-shadow:0 3px 12px #32150c20}
  .pick{margin-top:0;padding-top:18px;max-width:1000px}
  .pick__card{box-shadow:0 10px 24px -18px #4e2d2340}
  @media(max-width:900px){:host{--slide-h:285px;--gap:220px}.cf{height:520px}}
  @media(max-width:600px){:host{--slide-h:230px;--gap:155px}.cf{height:420px;margin-top:18px}.cf__set{background-position:center top;background-size:auto 118%;border-radius:0}.cf__item{top:64px}.stage-price{top:5%;right:6%}.motion-status{bottom:14px}.pick{padding-top:14px}}


  /* One continuous shop display, including the selection and purchase controls. */
  .showroom{position:relative;isolation:isolate;margin-top:22px;background:#f3eae1 url('sweet-shop-white.webp') center top/100% 100% no-repeat;padding-bottom:12px}
  .showroom::before{content:'';position:absolute;inset:0 0 auto;height:70px;background:linear-gradient(#fff8ef,transparent);pointer-events:none;z-index:1}
  .cf{margin-top:0}.cf__set{display:none}
  .pick{margin-top:-64px;padding:0 28px 10px;max-width:1000px}
  .pick__card{background:transparent;border:0;box-shadow:none;border-radius:0;padding:10px 0;gap:24px}
  .pick__name{font-size:32px;text-shadow:0 1px 8px #fff8ef}
  .pick__sub{color:#67534d}.meter{margin-top:12px}
  .btn--box{background:#fffaf0b8;border-color:#d9c7b7}.btn--buy{box-shadow:0 6px 15px #790f3c25}
  .bottomline{border-top:1px solid #8f756025;max-width:940px;margin:8px auto 0;padding:12px 10px 0}
  .motion-status{bottom:78px;background:#fffaf0d9;box-shadow:none;border:0;color:#765746}
  .stage-price{background:#fff9f0;color:var(--hot);outline-color:#b4145a55;box-shadow:0 4px 16px #40202012}
  .shadow{filter:blur(3px)}
  @media(max-width:600px){
    .showroom{margin-top:18px;background-size:auto 100%;background-position:center top;padding-bottom:8px}
    .cf{height:420px;margin-top:0}.pick{margin-top:-38px;padding:0 20px 8px}
    .pick__card{gap:12px;padding:12px 0 2px}.pick__name{font-size:27px}.pick__sub{font-size:10px}
    .pick__buy{gap:8px}.meter{margin-top:14px}.bottomline{margin:4px 14px 0;font-size:7px;gap:10px}
    .motion-status{bottom:42px;font-size:8px}.stage-price{top:4%}
  }


  :host{--cream:#fafafa;--hot:#97153f;--hot-2:#72102e}
  .hero{background:#fafafa}.filters{background:#fff;border-color:#e5e1e1}
  .showroom{background-color:#f2f2f3}.showroom::before{background:linear-gradient(#fafafa,transparent)}
  .stage-price{background:#fff;outline-color:#97153f55}.cf__nav{background:#ffffffed;border-color:#ded9da}
  .motion-status{background:#ffffffe0;color:#5b4b50}.pick__sub{color:#51474b}
  .btn--box{background:#ffffffe6;border-color:#ded9da}.bottomline{color:#65585e;border-color:#65585e22}
  @media(max-width:600px){.showroom{background-size:auto 94%}}

  /* Push scenery to the edges; keep product information on a clean white fascia. */
  .showroom{background-color:#fff;background-image:linear-gradient(180deg,transparent 440px,#fff 540px),url('sweet-shop-white.webp');background-size:100% 100%,130% 660px;background-position:center top;background-repeat:no-repeat;padding-bottom:22px}
  .pick{max-width:1100px;margin-top:-40px;padding:0 32px 14px}
  .pick__card{padding:12px 0 20px;gap:24px;align-items:center}
  .pick__name{font-size:34px;color:#241a1f;text-shadow:none;line-height:1.15}
  .pick__sub{font-size:14px;color:#51474b;margin-top:7px}
  .pick__buy{gap:12px}.btn{font-size:15px;padding:14px 18px;gap:12px}.btn .price{font-size:15px;padding:4px 10px}
  .btn--box{background:#fff;border-color:#bcb1b6}.btn .price s{opacity:.8;font-size:13px}
  .meter{justify-content:space-between;border-top:1px solid #ded8db;padding-top:16px;margin-top:0;gap:18px}
  .meter__count,.meter__count b{font-size:14px;color:#42343b}.rail{height:4px;background:#dcd4d8;flex:1;max-width:180px}
  .hint{font-size:12px;color:#51434a}.hint kbd{background:#fff;border-color:#c9bec4;color:#42343b;padding:2px 6px}
  .bottomline{font-size:12px;color:#51434a;max-width:1036px;margin-top:6px;padding-top:14px;gap:30px}
  .motion-status{font-size:12px;color:#42343b;bottom:76px;padding:7px 14px;background:#fff}
  @media(max-width:900px){.pick__card{flex-direction:column;text-align:center;gap:16px}.meter{justify-content:center;flex-wrap:wrap}.hint{width:100%}.bottomline{gap:16px;font-size:11px}}
  @media(max-width:600px){
    .showroom{background-size:100% 100%,auto 520px;background-image:linear-gradient(180deg,transparent 340px,#fff 420px),url('sweet-shop-white.webp');padding-bottom:18px}
    .pick{margin-top:-10px;padding:0 20px 10px}.pick__card{padding:8px 0 18px;gap:16px}.pick__name{font-size:29px}.pick__sub{font-size:12px;margin-top:5px}
    .btn{font-size:13px;padding:12px 13px;gap:8px}.btn .price{font-size:13px;padding:4px 8px}.pick__buy{gap:8px}
    .meter{padding-top:14px;gap:12px}.hint{font-size:11px;line-height:1.8}.meter__count,.meter__count b{font-size:13px}.rail{max-width:140px}
    .bottomline{flex-wrap:wrap;gap:6px 18px;font-size:11px;padding-top:12px;margin:4px 20px 0}.bottomline span:last-child{display:none}
    .motion-status{font-size:11px;bottom:46px}
  }


@media(max-width:600px){.pick__buy .btn{font-size:12px;padding:12px 10px;gap:6px;white-space:nowrap}.pick__buy .price{font-size:12px;padding:3px 6px;gap:4px}.pick__buy .price s{font-size:11px}}
@media(max-width:360px){.pick__buy{flex-direction:column}.pick__buy .btn{justify-content:space-between;font-size:13px;padding:12px 16px}}
.meter{justify-content:center;gap:16px}.meter .rail{flex:0 1 180px}