/* Generated from combos.html <style> by build-wp-page.py */

  :root{--paper:#F3EEE1;--paper-raise:#FAF5EA;--ink:#17140F;--ink-soft:#6F6353;--gold:#B08D3E;--gold-bright:#CDA85A;--fig:#5A2330;--pistachio:#7C8A4E;--hairline:rgba(23,20,15,0.12)}
  html.no-js .reveal{opacity:1;transform:none}
  *{box-sizing:border-box}html,body{margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--gold);color:#fff}
  h1,h2,h3,h4{font-family:'Cormorant',serif;font-weight:600;letter-spacing:-0.005em;line-height:1.05;margin:0}
  p{line-height:1.7;margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
  .wrap{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}@media(min-width:768px){.wrap{padding-left:40px;padding-right:40px}}
  .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
  .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.4;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}
  .nav{position:sticky;top:0;z-index:50;background:rgba(243,238,225,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hairline)}
  .ulink{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .4s cubic-bezier(.22,1,.36,1)}
.ulink:hover{text-decoration-color:var(--gold)}
/* Primary nav: a hairline of gold drawn under the word, not a browser underline.
   It grows from the left on hover and retracts to the right on leave, and the
   current page keeps its own drawn, so "here" and "going here" speak the same
   language instead of two. */
.nav nav a.ulink{position:relative}
.nav nav a.ulink,.nav nav a.ulink:hover{text-decoration-color:transparent}
.nav nav a.ulink::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transform:scaleX(0);transform-origin:right center;
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
.nav nav a.ulink:hover::after,.nav nav a.ulink:focus-visible::after,.nav nav a.ulink.active::after{
  transform:scaleX(1);transform-origin:left center}
.nav nav a.ulink:focus-visible{outline:2px solid var(--fig);outline-offset:6px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  .nav nav a.ulink::after{transform:scaleX(1);opacity:0;transition:opacity .2s}
  .nav nav a.ulink:hover::after,.nav nav a.ulink:focus-visible::after,.nav nav a.ulink.active::after{opacity:1}}
  .nav a.active{color:var(--gold)}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
  .hide-sb::-webkit-scrollbar{display:none}.hide-sb{scrollbar-width:none}
  section[id]{scroll-margin-top:92px} /* land below the sticky nav */
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{scroll-behavior:auto!important}}

  /* ---------- loading skeletons: shimmer placeholders for the jump chips,
     gifting hero panels and group grids until combos.json resolves and
     .innerHTML overwrites them - see the identical pattern (and its fuller
     comment) in index.html. ---------- */
  .skel{position:relative;overflow:hidden;background:rgba(36,26,18,.08)}
  .skel::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.6) 50%,transparent 75%);
    transform:translateX(-100%);animation:skelShine 1.6s ease-in-out infinite}
  @keyframes skelShine{100%{transform:translateX(100%)}}
  .skel-line{height:12px;border-radius:6px;background:rgba(36,26,18,.08)}
  @media(prefers-reduced-motion:reduce){.skel::after{animation:none;display:none}}

  /* ---------- combo cards ---------- */
  .ccard{background:var(--paper-raise);border:1px solid var(--hairline);border-radius:18px;overflow:hidden;
    transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .ccard:hover{transform:translateY(-6px);box-shadow:0 34px 60px -28px rgba(90,35,48,.35)}
  /* fanned cluster of real product studio shots */
  .cluster{position:relative;height:100%;min-height:230px}
  .cluster .ct{position:absolute;border-radius:14px;overflow:hidden;background:#EFE8D8;border:1px solid var(--hairline);
    box-shadow:0 18px 34px -18px rgba(23,20,15,.4);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .cluster .ct img{width:100%;height:100%;object-fit:cover}
  .ccard:hover .ct,.heroCard:hover .ct{transform:translateY(-4px) rotate(0deg)!important}
  /* hamper cover photos: slow zoom on hover */
  .cover-img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .ccard:hover .cover-img{transform:scale(1.05)}
  /* Price and button live in one block pinned to the bottom of the card, so a
     row of cards ends in a row of buttons on one line however long the copy
     above each one runs. The cards are already equal height: the grid stretches
     them. */
  .ccard .cfoot{margin-top:auto}
  /* the wide card draws a rule above its price row: the contents above it need
     room to breathe, opened or closed, or the chips sit on the line */
  .ccard--wide .cinc{margin-bottom:20px}
  /* The saving sits at the far end of the price line rather than under it: what
     you pay on the left, what you keep on the right, one line instead of two.
     Cards in a row are the same width, so where the line is too narrow to hold
     both they all wrap together and the row still reads straight across. */
  .ccard--tall .cprice{justify-content:space-between;column-gap:8px}
  .ccard--tall .cprice .save{margin-left:auto}
  /* the four-up cards are the narrowest on the page: the pill tightens rather
     than dropping to a line of its own */
  @media(min-width:1024px){
    .ccard--tall .cprice .save{font-size:11.5px;padding:4px 10px;gap:.3em}
  }
  /* The covers are photographs now, backdrop and all, so they fill the card
     edge to edge at every width: the box takes the photo's own ratio and the
     photo covers it, which means no crop and no bars. The fallback tone is the
     backdrop's own average rather than white, so a sub-pixel gap at a rounded
     corner cannot flash. */
  .ccard .cover-box{background:#DEC19F}
  @media(prefers-reduced-motion:reduce){.ccard:hover .ct,.heroCard:hover .ct{transform:none!important}.cover-img{transition:none}.ccard:hover .cover-img{transform:none}}
  /* layouts by item count (percent-based, 4:5-ish tiles) */
  .n2 .ct:nth-child(1){width:45%;height:72%;left:14%;top:12%;transform:rotate(-5deg);z-index:2}
  .n2 .ct:nth-child(2){width:43%;height:66%;left:41%;top:19%;transform:rotate(5deg);z-index:1}
  .n3 .ct:nth-child(1){width:46%;height:74%;left:6%;top:13%;transform:rotate(-5deg);z-index:3}
  .n3 .ct:nth-child(2){width:40%;height:64%;left:38%;top:6%;transform:rotate(3deg);z-index:2}
  .n3 .ct:nth-child(3){width:38%;height:60%;left:60%;top:30%;transform:rotate(7deg);z-index:1}
  .n4 .ct:nth-child(1){width:42%;height:68%;left:4%;top:16%;transform:rotate(-6deg);z-index:4}
  .n4 .ct:nth-child(2){width:36%;height:58%;left:31%;top:5%;transform:rotate(2deg);z-index:3}
  .n4 .ct:nth-child(3){width:36%;height:58%;left:44%;top:34%;transform:rotate(6deg);z-index:2}
  .n4 .ct:nth-child(4){width:34%;height:54%;left:66%;top:12%;transform:rotate(9deg);z-index:1}
  .n5 .ct:nth-child(1){width:38%;height:66%;left:3%;top:17%;transform:rotate(-7deg);z-index:5}
  .n5 .ct:nth-child(2){width:33%;height:56%;left:24%;top:4%;transform:rotate(-2deg);z-index:4}
  .n5 .ct:nth-child(3){width:34%;height:58%;left:36%;top:34%;transform:rotate(4deg);z-index:3}
  .n5 .ct:nth-child(4){width:32%;height:54%;left:55%;top:8%;transform:rotate(7deg);z-index:2}
  .n5 .ct:nth-child(5){width:30%;height:50%;left:70%;top:36%;transform:rotate(10deg);z-index:1}
  /* mini item chips */
  /* ---------- what is inside: a disclosure ----------
     On a grid card the list of contents was the tallest thing on the card and
     the least urgent: the photo, the price and the button are what a buyer
     scans. It sits behind a row that says how many there are and opens on a
     click, at every width. The dark gifting panels are the exception (see the
     phone block below): they are full-width and have the room, so their chips
     stay out in the open on a desktop.
     Default state below is the passthrough one: button hidden, list a
     display:contents no-op. .ccard turns the real disclosure on. */
  .cinc{display:flex;flex-direction:column;min-height:0;width:100%;text-align:left}
  .cinc-btn{
    display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
    margin-top:12px;padding:9px 13px;cursor:pointer;
    border:1px solid var(--hairline);border-radius:11px;background:var(--paper);color:var(--ink);
    font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:600;line-height:1.25;text-align:left;
    transition:border-color .2s,background .2s}
  .cinc-btn:hover{border-color:var(--ink-soft)}
  .cinc-btn:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
  .cinc-btn svg{
    flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.22,1,.36,1)}
  .cinc.is-open .cinc-btn svg{transform:rotate(180deg)}
  /* 0fr to 1fr animates the height without anyone measuring anything */
  .cinc-list{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1)}
  .cinc.is-open .cinc-list{grid-template-rows:1fr}
  /* the only thing inside the collapsed row must be nothing at all: padding
     here would leak into every closed card */
  .cinc-list > *{
    overflow:hidden;min-height:0;margin-top:0!important;padding-top:0;
    transition:padding-top .28s cubic-bezier(.22,1,.36,1)}
  .cinc.is-open .cinc-list > *{padding-top:10px}
  @media(min-width:640px){
    /* the dark gifting panels are full-width and have the room: their chips
       stay out in the open, the way they always were */
    .cinc--dark .cinc-btn{display:none}
    .cinc--dark .cinc-list{display:contents}
    /* opened, the chips are a two-up (or more) grid rather than a ragged wrap:
       equal-width pills read as a list of what is in the box. auto-fill means a
       narrow card falls back to one column on its own, with no breakpoint to
       keep in step. */
    .ccard .cinc-list > div{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
    .ccard .cinc-list .ichip{width:100%;justify-content:flex-start}
  }
  .ichip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline);border-radius:999px;
    padding:4px 12px 4px 4px;font-size:12px;font-weight:500;color:var(--ink);background:var(--paper)}
  .ichip img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
  .ichip.gift{border-color:var(--pistachio);color:#4E5A2E;background:rgba(124,138,78,.1)}
  /* save pill */
  .save{display:inline-flex;align-items:center;gap:.4em;background:rgba(124,138,78,.14);color:#4E5A2E;
    border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
  /* badge */
  .cbadge{position:absolute;z-index:10;top:14px;left:14px;background:var(--fig);color:var(--paper-raise);
    font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
  /* add-to-cart (ink pill, gold hover, same voice as shop) */
  .cadd{display:inline-flex;align-items:center;justify-content:center;gap:.55em;background:var(--ink);color:var(--paper);
    border-radius:999px;padding:13px 26px;font-weight:600;font-size:14px;letter-spacing:.02em;cursor:pointer;
    transition:background .3s,color .3s,transform .3s,box-shadow .3s;border:0}
  .cadd:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(176,141,62,.6)}
  .cadd:active{transform:translateY(0) scale(.98)}
  .cadd:focus-visible{outline:2px solid var(--fig);outline-offset:3px}
  /* flagship hero CTA: oxblood -> gold wipe (echoes the PDP Buy now) */
  .hcta{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:999px;
    padding:15px 34px;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--fig);background:var(--paper-raise);border:0;cursor:pointer;
    transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)}
  .hcta>span{position:relative;z-index:1;transition:color .35s}
  .hcta::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,var(--gold),var(--gold-bright));transform:translateY(101%);transition:transform .42s cubic-bezier(.22,1,.36,1)}
  .hcta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
  .hcta:hover::after{transform:translateY(0)}
  .hcta:hover>span{color:var(--ink)}
  .hcta:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){.hcta,.hcta::after,.hcta>span,.cadd{transition:none}.hcta:hover,.cadd:hover{transform:none}}
  /* gift packing toggle on the dark gifting hero panels */
  .hgift{display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid rgba(250,245,234,.28);border-radius:11px;cursor:pointer;color:#FAF5EA;width:fit-content;transition:border-color .2s,background .2s}
  .hgift:hover{border-color:rgba(250,245,234,.5)}
  .hgift.on{border-color:rgba(250,245,234,.7);background:rgba(250,245,234,.09)}
  .hgift input{position:absolute;opacity:0;width:0;height:0}
  .hgbox{flex:none;width:19px;height:19px;border-radius:5px;border:1.5px solid rgba(250,245,234,.45);display:grid;place-items:center;color:transparent;transition:.2s}
  .hgbox svg{width:11px;height:11px}
  .hgift.on .hgbox{background:#FAF5EA;border-color:#FAF5EA;color:#241A12}
  .hgift input:focus-visible + .hgbox{outline:2px solid #FAF5EA;outline-offset:2px}
  .hgtxt{font-size:12.5px;font-weight:600}
  .hgfee{font-size:12.5px;font-weight:700;opacity:.9}
  /* anchor chips: each group carries its own hue (--c ink-strength, --cs soft tint) */
  .achip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hairline);background:var(--paper-raise);
    border-radius:999px;padding:9px 16px 9px 14px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink);cursor:pointer;
    transition:background .3s,color .3s,border-color .3s,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
  .achip .d{color:var(--c);font-size:14px;line-height:1}
  .achip .n{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 7px;
    border-radius:999px;background:var(--cs);color:var(--c);font-size:11.5px;font-weight:700;transition:background .3s,color .3s}
  .achip:hover{background:var(--c);border-color:var(--c);color:var(--paper-raise);transform:translateY(-2px);
    box-shadow:0 12px 22px -12px var(--c)}
  .achip:hover .d{color:rgba(250,245,234,.65)}
  .achip:hover .n{background:rgba(250,245,234,.18);color:#FAF5EA}
  .achip:active{transform:translateY(0)}
  .achip:focus-visible{outline:2px solid var(--c);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){.achip{transition:none}.achip:hover{transform:none}}
  /* jump-grid: the header's 2x3 chip grid on the right (desktop) - each chip
     stretched to fill its cell and enlarged, replacing the old horizontal-
     scroll row so the header takes less vertical space. Enclosed in a
     jump-card so the six chips read as one grouped control, and each chip
     sits on --paper-raise + its own soft shadow against the card's --paper
     backdrop for real contrast (both were --paper-raise before, blending
     the chips into the card with only a 1px hairline telling them apart). */
  .jump-card{background:var(--paper);border:1px solid var(--hairline);border-radius:22px;padding:18px;
    box-shadow:0 26px 50px -32px rgba(23,20,15,.3)}
  /* on phone: the original horizontal-scroll pill row (compact, auto-width
     chips) - the 2-col stretched-card grid below is a sm+ upgrade only, since
     stacking six full-width "cards" one below another ate too much vertical
     space on small screens. */
  .jump-grid{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 8px}
  .jump-grid .achip{flex:0 0 auto}
  @media(max-width:639.98px){.jump-grid .achip.skel{width:150px}}
  @media(min-width:640px){
    .jump-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;overflow-x:visible;padding-bottom:0}
    .jump-grid .achip{width:100%;flex:none;justify-content:space-between;padding:15px 20px;font-size:14.5px}
  }
  /* :not(:hover) deliberately, not just a plain selector: this and .achip:hover
     (background:var(--c); color:var(--paper-raise)) are equal specificity, and
     without the exclusion this rule's own background/border - being later in
     the file - would win the cascade tie on hover and stick at --paper-raise
     while the text still switched to --paper-raise too, going invisible
     (light text on light background - the bug this comment is here to explain
     next time someone is tempted to simplify it away). */
  .jump-grid .achip:not(:hover){background:var(--paper-raise);border-color:var(--paper-raise);
    box-shadow:0 8px 18px -10px rgba(23,20,15,.22)}
  .jump-grid .achip:hover{box-shadow:0 14px 28px -12px var(--c)}
  .jump-grid .achip .n{min-width:24px;height:24px;font-size:12.5px}
  .heroCard{border-radius:22px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(90,35,48,.55)}
  /* The Grand Heart cover is a composite of the four heart boxes, so it needs
     to sit inside the panel rather than bleed to its edges: the purple shows as
     a frame and none of the boxes is cut off by the card edge. */
  /* Heart set: four boxes, each centred in its own panel. One grid cell per box,
     so a box can never sit off-centre the way it did inside a baked composite,
     and the gaps are a single number to change. */
  .gh-quad{
    position:absolute;inset:0;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
    gap:clamp(8px,1.6vw,14px);padding:clamp(12px,2.4vw,22px)}
  .gh-cell{
    position:relative;display:grid;place-items:center;min-width:0;min-height:0;
    padding:clamp(6px,1.4vw,14px);border-radius:14px;
    background:rgba(250,245,234,.06);border:1px solid rgba(250,245,234,.09)}
  .gh-cell img{
    display:block;width:100%;height:100%;max-width:100%;object-fit:contain;
    filter:drop-shadow(0 16px 20px rgba(20,12,28,.42));
    transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .heroCard:hover .gh-cell img{transform:scale(1.04)}
  @media(max-width:520px){.gh-cell{border-radius:12px}}
  @media(prefers-reduced-motion:reduce){.gh-cell img{transition:none}.heroCard:hover .gh-cell img{transform:none}}
  /* Six stacked sections of combos: 80px between each was a screenful of paper
     across the page. The id selector outranks the utility class on the section
     itself, so the markup keeps its one spacing class and this tunes it. */
  @media(min-width:640px){
    #groups > section{padding-bottom:56px}
    #groups > section > div:first-child{margin-bottom:28px}
  }

  /* ---------- phones: two combos per row, jump list as a dropdown ----------
     The cards halve in width, so their text and buttons centre up; the row of
     jump pills becomes one dropdown so the page starts with the combos, not with
     a row of controls. */
  @media(max-width:639.98px){
    /* ---------- the combo card on a phone ----------
       Two things made these cards twice as tall as they needed to be. The cluster
       carried min-height:230px, which ignored the card's own shorter box and, in a
       column half the screen wide, stretched each product tile into a thin
       portrait crop. And every product in the combo was listed as a pill, always.
       The artwork is untouched: the tiles are percentages of their box, so giving
       the box a shape proportional to its width scales the whole composition down
       intact rather than cropping it. */
    .cclus{height:auto!important;margin-left:10px;margin-right:10px;margin-top:10px}
    .cluster{height:auto;min-height:0;aspect-ratio:1/.84}

    /* the card centres its children on a phone, which was shrinking this row to
       its own text and wrapping the label; it spans the card. */
    .cinc{flex:1 1 auto;width:100%;align-self:stretch;text-align:left}
    .cinc-btn{
      display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
      margin-top:9px;padding:7px 10px;cursor:pointer;
      border:1px solid var(--hairline);border-radius:10px;background:var(--paper);color:var(--ink);
      font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;font-weight:600;line-height:1.25;text-align:left}
    .cinc-btn:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
    .cinc-btn svg{
      flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.22,1,.36,1)}
    .cinc.is-open .cinc-btn svg{transform:rotate(180deg)}
    /* half a screen wide is not enough for the whole phrase; the chevron and
       the position say the rest. The full-width panels keep it. */
    .ccard .cinc-more{display:none}
    /* 0fr to 1fr animates the height without anyone measuring anything */
    .cinc-list{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1)}
    .cinc.is-open .cinc-list{grid-template-rows:1fr}
    /* the only thing inside the collapsed row must be nothing at all: padding
       here would leak 8px into every closed card */
    .cinc-list > *{
      overflow:hidden;min-height:0;margin-top:0!important;padding-top:0;
      transition:padding-top .28s cubic-bezier(.22,1,.36,1)}
    .cinc.is-open .cinc-list > *{padding-top:8px}
    /* the dark gifting panels keep their own palette */
    .cinc--dark .cinc-btn{
      background:rgba(250,245,234,.08);border-color:rgba(250,245,234,.22);color:#FAF5EA}
    /* chips are secondary here, so they take less room when they do appear */
    .ichip{font-size:11px;padding:3px 9px 3px 3px;gap:6px}
    .ichip img{width:20px;height:20px}
  }
  /* the narrowest phones: the row still holds its label on one line */
  @media(max-width:359.98px){
    .cinc-btn{padding:6px 8px;gap:6px;font-size:11px}
    .cinc-btn svg{width:12px;height:12px}
  }

  @media(max-width:639.98px){
    .jump-grid{display:none!important}
    /* The selector is the only container it needs. The card around it was a box
       drawn around a box, and it held more empty space than content. */
    .jump-card{background:none;border:0;padding:0;box-shadow:none;margin-top:16px}
    .jump-drop{display:block;position:relative;width:100%;max-width:400px;margin:0 auto}
    .jump-drop .csel-btn{
      display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
      height:50px;padding:0 20px;border-radius:25px;background:var(--paper-raise);
      border:1px solid var(--hairline);color:var(--ink);cursor:pointer;
      font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;font-weight:600;
      transition:border-color .2s}
    .jump-drop .csel-btn:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
    .jump-drop .csel-btn svg{flex:none;transition:transform .3s cubic-bezier(.6,.05,.1,1);color:var(--ink-soft)}
    .jump-drop.open .csel-btn{border-color:var(--ink)}
    .jump-drop.open .csel-btn svg{transform:rotate(180deg)}
    /* Fixed, not absolute: the header band hides its overflow, so a menu hanging
       below the band was cut off. js/page-combos.js places it under the button. */
    .jump-drop .csel-list{
      position:fixed;z-index:70;margin:0;padding:6px;
      list-style:none;background:var(--paper-raise);border:1px solid var(--hairline);
      border-radius:16px;box-shadow:0 26px 50px -22px rgba(23,20,15,.42);
      max-height:min(62vh,420px);overflow-y:auto;overscroll-behavior:contain;
      opacity:0;visibility:hidden;transform:translateY(-6px);
      transition:opacity .2s,transform .22s,visibility .22s}
    .jump-drop.open .csel-list{opacity:1;visibility:visible;transform:none}
    .jump-drop .csel-list button{
      display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
      min-height:46px;padding:0 14px;border:0;background:none;border-radius:11px;cursor:pointer;
      font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--ink);text-align:left}
    .jump-drop .csel-list button:hover,
    .jump-drop .csel-list button:focus-visible{background:rgba(23,20,15,.06);outline:none}
    .jump-drop .csel-list .n{
      flex:none;font-size:12.5px;color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums}

    .ccard{border-radius:14px}
    .ccard > div:last-child{padding:12px 12px 14px!important;text-align:center}
    .ccard .eyebrow{font-size:9px;letter-spacing:.12em}
    .ccard h3{font-size:16px!important;line-height:1.25;margin-top:4px!important}
    .ccard p{font-size:12px!important;line-height:1.45}
    .ccard .ichip{font-size:10.5px;padding:3px 7px;gap:4px}
    .ccard .ichip img{width:14px;height:14px}
    .ccard .save{font-size:10px;padding:2px 7px}
    .ccard .cadd{width:100%;padding:11px 14px;font-size:13px;border-radius:999px}
    .ccard > div:last-child > div{justify-content:center}
    .ccard .flex.items-end{justify-content:center}
    .cbadge{font-size:9.5px;padding:3px 8px;top:8px;left:8px}
  }
  @media(min-width:640px){.jump-drop{display:none}}
  @media(prefers-reduced-motion:reduce){.jump-drop .csel-list,.cinc-list,.cinc-list > *,.cinc-btn svg{transition:none}}