/* BriefRooms — cholesterol fat-swap chips, shared PL/EN */
body.cholesterol-page .chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:14px 0 10px;
}

body.cholesterol-page .chips details.pop{
  position:relative;
  margin:0;
  padding:0;
  overflow:visible;
  border:1px solid rgba(92,169,221,.46);
  border-radius:17px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(229,245,255,.54)),
    linear-gradient(135deg,rgba(148,216,255,.52),rgba(105,177,229,.25) 52%,rgba(224,245,255,.42));
  box-shadow:
    0 12px 24px rgba(38,79,112,.14),
    0 3px 7px rgba(26,62,91,.08),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(79,149,201,.12),
    inset 0 0 0 1px rgba(255,255,255,.34);
  cursor:pointer;
  transform:translateY(0);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
  -webkit-tap-highlight-color:transparent;
}

@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  body.cholesterol-page .chips details.pop{
    background:
      linear-gradient(180deg,rgba(250,254,255,.66),rgba(207,237,255,.42)),
      linear-gradient(135deg,rgba(144,218,255,.50),rgba(94,169,225,.22) 52%,rgba(229,248,255,.36));
    backdrop-filter:blur(11px) saturate(135%);
    -webkit-backdrop-filter:blur(11px) saturate(135%);
  }
}

body.cholesterol-page .chips details.pop::before{
  content:"";
  position:absolute;
  inset:2px 4px auto 4px;
  height:42%;
  border-radius:13px 13px 50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,0));
  pointer-events:none;
}

body.cholesterol-page .chips details.pop:hover,
body.cholesterol-page .chips details.pop:focus-within,
body.cholesterol-page .chips details.pop[open]{
  border-color:rgba(48,143,207,.70);
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(213,240,255,.62)),
    linear-gradient(135deg,rgba(146,222,255,.64),rgba(70,157,221,.31) 52%,rgba(221,246,255,.50));
  box-shadow:
    0 16px 30px rgba(34,91,134,.19),
    0 4px 10px rgba(25,70,105,.10),
    0 0 0 3px rgba(109,197,249,.13),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(63,138,193,.14);
  transform:translateY(-2px);
  filter:none;
}

body.cholesterol-page .chips details.pop summary{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  list-style:none;
  border-radius:16px;
  color:#173752;
  font-size:15.5px;
  font-weight:760;
  line-height:1.25;
  letter-spacing:-.01em;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.78);
  outline:none;
  user-select:none;
}

body.cholesterol-page .chips details.pop summary::-webkit-details-marker{display:none}
body.cholesterol-page .chips details.pop summary::marker{content:""}

body.cholesterol-page .chips details.pop summary::after{
  content:"+";
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-left:9px;
  border:1px solid rgba(47,128,183,.24);
  border-radius:50%;
  background:rgba(255,255,255,.42);
  color:#2d6f9e;
  font-size:13px;
  font-weight:900;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .18s ease,background .18s ease;
}

body.cholesterol-page .chips details.pop[open] summary::after{
  content:"−";
  background:rgba(225,244,255,.82);
  transform:rotate(180deg);
}

body.cholesterol-page .chips .chip-sep{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:0 2px;
  color:#4b6075;
  font-size:14px;
  font-weight:760;
  line-height:1.2;
  white-space:nowrap;
}

body.cholesterol-page .chips .chip-sep .arrow{
  color:#3682b6;
  font-size:18px;
  font-weight:900;
  text-shadow:0 1px 0 #fff;
}

body.cholesterol-page .chips details.pop .popover{
  position:absolute;
  z-index:40;
  top:calc(100% + 10px);
  left:0;
  box-sizing:border-box;
  width:min(340px,calc(100vw - 48px));
  min-width:280px;
  max-width:340px;
  padding:14px 15px;
  border:1px solid rgba(186,232,222,.30);
  border-radius:15px;
  background:
    radial-gradient(220px 100px at 18% 0%,rgba(144,230,208,.14),transparent 70%),
    linear-gradient(160deg,rgba(45,105,86,.97),rgba(28,73,67,.98));
  color:#f4fffb;
  box-shadow:
    0 20px 42px rgba(23,50,54,.30),
    inset 0 1px 0 rgba(255,255,255,.11);
  font-size:13px;
  line-height:1.52;
}

body.cholesterol-page .chips details.pop:last-of-type .popover{
  right:0;
  left:auto;
}

body.cholesterol-page .chips details.pop .popover .small{
  font-size:12.5px;
  line-height:1.52;
  opacity:1;
}

body.cholesterol-page .chips details.pop .popover .pill{
  border-color:rgba(220,245,240,.22);
  background:rgba(255,255,255,.12);
  color:#eefcf7;
}

@media (max-width:720px){
  body.cholesterol-page .chips{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin:14px 0 12px;
  }

  body.cholesterol-page .chips details.pop{
    width:100%;
    border-radius:16px;
  }

  body.cholesterol-page .chips details.pop summary{
    min-height:50px;
    justify-content:space-between;
    padding:13px 15px 13px 17px;
    font-size:15px;
    text-align:left;
  }

  body.cholesterol-page .chips .chip-sep{
    min-height:auto;
    padding:1px 6px;
    justify-content:center;
    font-size:13px;
  }

  body.cholesterol-page .chips .chip-sep .arrow{font-size:16px}

  body.cholesterol-page .chips details.pop .popover,
  body.cholesterol-page .chips details.pop:last-of-type .popover{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    width:calc(100% - 14px);
    min-width:0;
    max-width:none;
    margin:0 7px 8px;
    padding:13px 14px;
    border-radius:13px;
    box-shadow:0 10px 24px rgba(23,50,54,.18),inset 0 1px 0 rgba(255,255,255,.10);
  }

  body.cholesterol-page .chips details.pop:hover,
  body.cholesterol-page .chips details.pop:focus-within,
  body.cholesterol-page .chips details.pop[open]{
    transform:none;
  }
}

@media (max-width:420px){
  body.cholesterol-page .chips details.pop summary{
    min-height:48px;
    padding:12px 13px 12px 15px;
    font-size:14.5px;
  }

  body.cholesterol-page .chips details.pop summary::after{
    width:20px;
    height:20px;
    flex:0 0 20px;
    margin-left:10px;
  }

  body.cholesterol-page .chips details.pop .popover .small{
    font-size:12px;
    line-height:1.5;
  }
}

@media (prefers-reduced-motion:reduce){
  body.cholesterol-page .chips details.pop,
  body.cholesterol-page .chips details.pop summary::after{transition:none}
  body.cholesterol-page .chips details.pop:hover,
  body.cholesterol-page .chips details.pop:focus-within{transform:none}
}